Cargando

Ir a contenido

X


Ver Más! No te preocupes, recuperar archivos eliminados nunca fue tan sencillo. No te pierdas el tutorial que hemos preparado. Aprende a utilizar Recoverit en Windows 10.


 


HTML5 atributos

Los elementos de nuestro documento HTML es el eje principal del mismo ya que son ellos los que nos especifican como se manejará el contenido, los elementos pueden extender su funcionalidad y ser configurados de manera que cumplan con ciertos características que se adapten a las necesidades del sitio web.


Escrito por el jul 29 2013 09:55


Existen atributos que pueden ser aplicados sólo a algún elemento en específico pero en cambio algunos pueden ser aplicados a uno o más elementos.

En el siguiente ejemplo veremos la aplicación de un atributo al elemento <a>


html-atributos.jpg


Este elemento nos permite crear un hipervínculo cuando hacemos click en el, es importante mencionar que los atributos solo pueden ser agregados en el comienzo de las etiquetas y debe tener un nombre y su correspondiente valor.
Adicionalmente podemos agregar múltiples atributos a nuestros elementos esto lo hacemos separándolos con un espacio simple:

I like <a class="link" href="/apples.html" id="firstlink">apples</a> and oranges.

Atributos Booleanos

Algunos atributos son booleanos, a estos no hay necesidad de especificarles valor, solo se añade al elemento y el realizará su funcionalidad, por ejemplo:
Enter your name: <input disabled>

Aquí estamos usando el atributo disabled en el elemento input que le provee al usuario los medios para ingresar información, añadiendo el atributo disabled impedimos al usuario de ingresar cualquier información mediante el teclado o copiada en el portapapeles.

Atributos Personalizados

Podemos definir atributos personalizados mientras que el nombre que usemos tenga el prefijo data-:
Enter your name: <input disabled="true" data-creator="adam" data-purpose="collection">

El nombre correcto para estos atributos es atributos definidos por el autor y agregándole el prefijo data logramos que los navegadores lo interpreten sin ningún problema y sin ningún conflicto con algún otro atributo personalizado creado anteriormente.

Atributos Globales de HTML5

Existe una segunda categoría de atributos, estos configuran el comportamiento que es común en todos los elementos, veamos cuales son:
  • 1. Accesskey
Este atributo nos deja especificar uno o más atajos en el teclado que seleccionaran el elemento al que se le aplique en la página.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name: <input type="text" name="name" accesskey="n"/>
<p/>
Password: <input type="password" name="password" accesskey="p"/>
<p/>
<input type="submit" value="Log In" accesskey="s"/>
</form>
</body>
</html>

Aquí podemos ver que el input Name será accesado con la tecla ‘n’ passwor con ‘p’ y Login con ‘s’.




html-atributos-2.jpg

  • 2. Class
El atributo class es usado para clasificar o categorizar elementos, usualmente hacemos esto para que podamos localizar elementos en el documento que pertenezcan a la clase dada y poder aplicarle a la misma un estilo CSS.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a class="class1 class2" href="http://apress.com">Apress web site</a>
<p/>
<a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
</body>
</html>

Podemos aplicar múltiples clases a cada elemento separando las clases con espacio, los nombres que le coloquemos a las clases son arbitrarios pero mi recomendación es colocarles nombres que tengan algún significado en el contexto que estamos trabajando.



html-atributos-3.jpg

  • 3. Contenteditable
Este atributo nos permite cambiar el contenido de la página sin necesidad de un formulario o alguna programación extra.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p contenteditable="true">It is raining right now</p>
</body>
</html>

Hemos aplicado el atributo a un element <p> fijando el valor del atributo en “true” permitiendo al usuario modificar el contenido de ese párrafo. Cuando el usuario haga click en el elemento podrá empezar a modificar el mismo.



html-atributos-4.jpg


En el próximo tutorial veremos el resto de los atributos que se utilizan en nuestro documento HTML y que nos permitirán configurar nuestros elementos de la manera que deseamos y adaptados a nuestras necesidades.
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0

Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado jul 29 2013 09:55
  •   Actualizado ago 05 2013 21:55
  •   Visitas 1.1K
  •   Nivel
    Avanzado