Atributos básicos.
Los atributos de las etiquetas HTML sirven para definir detalles de comportamiento o presentación de la etiqueta a los que se les coloca. Se escriben dentro de la propia etiqueta con su nombre de atributo y el valor del atributo entre comillas.
![Resultado de imagen para atributos basicos de html png](https://misapuntesyacimientos.files.wordpress.com/2016/01/atributos-11.png?w=840)
href: se utiliza para indicar la URL a la que apunta el enlace y es el atributo mas importante para la etiqueta <a>.
Ejemplo: <a href="https://www.w3schools.com">This is a link</a>
![Resultado de imagen para href atributos png](https://mirpas.com/content/Web/4/images/hreflan_uso.png)
SRC: Donde el atributo src contiene como valor un URL. Este URL indica la dirección y el nombre de la imagen que se desea insertar. Esta dirección puede ser absoluta o relativa.
Ejemplo: <img src="img_girl.jpg">
![Resultado de imagen para ATRIBUTO SRC PNG](https://www.blogdephp.com/wp-content/uploads/2018/09/etiquetas-atributos-html.png)
width y
height:
proporcionan información para las imágenes.
Ejemplo: <img src="img_girl.jpg" width="500" height="600">
![Resultado de imagen para ATRIBUTO width y height png](https://i2.wp.com/www.webdisenia.com/wp-content/uploads/2015/03/00.png)
alt: especifica un texto alternativo que se utilizará, si una imagen no se puede visualizar.
Ejemplo: <img src="img_girl.jpg" alt="Girl with a jacket">
![Resultado de imagen para alt html png](https://blog.hubspot.com/hs-fs/hubfs/image-alt-text-HTML.png?width=600&name=image-alt-text-HTML.png)
Ejemplo: <h1 class="intro">Header 1</h1>
![Resultado de imagen para atributo class png](https://www.blogdephp.com/wp-content/uploads/2018/09/boton-rojo-css.png)
Ejemplo: <p contenteditable="true">This is an editable paragraph.</p>
Ejemplo: <li data-animal-type="bird">Owl</li>
Ejemplo: <p dir="rtl">Write this text right-to-left!</p>
Ejemplo: <p draggable="true">This is a draggable paragraph.</p>
Ejemplo: <div dropzone="copy"></div>
hidden: es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante.
Ejemplo: <p hidden>This paragraph should be hidden.</p>
Ejemplo: <h1 id="myHeader">Hello World!</h1>
Ejemplo: <p lang="fr">Ceci est un paragraphe.</p>
Ejemplo: <p contenteditable="true" spellcheck="true">This is a paragraph.</p>
Ejemplo: <p style="color:green">This is a paragraph.</p>
Ejemplo: <a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>
title: contiene un texto representado información relacionada al elemento al cual pertenece.
![Resultado de imagen para atributo title html png](https://misapuntesyacimientos.files.wordpress.com/2016/01/atributos-11.png?w=840)
translate: es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio.
onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o todos los marcos en un ser de marcos. Este evento es exclusivo de los elementos HTML body yHTML framset.
onunload: el evento "onunload" es disparado cuando el agente de usuario retira el documento de una ventana o marco. este evento es exclusivo de los elementos HTML body y HTML framset.
onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento.
ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento.
accesskey: Establece una tecla de acceso rápido a un elemento HTML.
Ejemplo: <a href="https://www.w3schools.com/html5" accesskey="h">HTML5</a><br>
tabindex: Establece la posición del elemento en el orden de tabulación de la página.
Ejemplo: <a href="http://www.google.com/" tabindex="1">Google</a>
onfocus, onblur: Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco.
Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">
![Resultado de imagen para ATRIBUTO width y height png](https://i2.wp.com/www.webdisenia.com/wp-content/uploads/2015/03/00.png)
alt: especifica un texto alternativo que se utilizará, si una imagen no se puede visualizar.
Ejemplo: <img src="img_girl.jpg" alt="Girl with a jacket">
![Resultado de imagen para alt html png](https://blog.hubspot.com/hs-fs/hubfs/image-alt-text-HTML.png?width=600&name=image-alt-text-HTML.png)
style: se utiliza para especificar el estilo de un elemento, como el color, tipo de letra, tamaño, etc.
Ejemplo: <p style="color:red">This is a paragraph.</p>
![Resultado de imagen para style html png](https://i.stack.imgur.com/EUCi5.png)
lang: Con este atributo se declara el lenguaje.
Ejemplos: <html lang="en-US">
![Resultado de imagen para lang html png](https://www.jetbrains.com/help/img/idea/2019.2/drag_to_html_light.png)
title: añade atributo al <p> elemento. El valor del atributo de título se muestra como un consejo al pasar el ratón sobre el párrafo.
Ejemplo: <p title="I'm a tooltip">
This is a paragraph.
</p>
![Resultado de imagen para title html png](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/HTML_source_code_example.svg/315px-HTML_source_code_example.svg.png)
Atributos para internacionalización
accesskey: provee un indicio para generar un atajo de teclado para el elemento actual.
Ejemplo: <a href="https://www.w3schools.com/css3" accesskey="c">CSS3</a>
![Resultado de imagen para atributo accesskey png](https://helpx.adobe.com/es/dreamweaver/using/code-hints/_jcr_content/main-pars/image_2008031912.img.png/html-attribute-code-hints.PNG)
![Resultado de imagen para atributo accesskey png](https://helpx.adobe.com/es/dreamweaver/using/code-hints/_jcr_content/main-pars/image_2008031912.img.png/html-attribute-code-hints.PNG)
class: es una lista de las clases del elemento separada por espacios.
![Resultado de imagen para atributo class png](https://www.blogdephp.com/wp-content/uploads/2018/09/boton-rojo-css.png)
contenteditable: es un atributo enumerado que indica si el elemento debe de ser editable por el usuario.
![Resultado de imagen para atributo contenteditable png](https://i0.wp.com/recursosformacion.com/wordpress-content/uploads/2014/08/2014-08-19_16h46_01.png?resize=633%2C426)
data-*: forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el HTML y su representación en el DOM que puede ser usada por scripts.
![Resultado de imagen para atributo data-*png](https://xitrus.es/blog/imgs/data-.png)
dir: es un atributo enumerado que indica la direccionalidad del texto de los elementos.
![Resultado de imagen para atributo dir en png](https://helpx.adobe.com/es/dreamweaver/using/code-hints/_jcr_content/main-pars/image_1724079367.img.png/image-code-hints_1497343448334.png)
draggable: es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el
HTML Drag and Drop API
.
dropzone: es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and DroP.
hidden: es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante.
![Resultado de imagen para atributo hidden html png](https://i.stack.imgur.com/aSTuG.png)
id: define un identificador único (ID) el cual no debe repetirse en todo el documento.
![Resultado de imagen para atributo id html png](https://misapuntesyacimientos.files.wordpress.com/2016/01/atributos-2.png?w=840)
lang: participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos.
spellcheck: es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado.
![Resultado de imagen para atributo spellcheck html png](https://i.stack.imgur.com/JXuoP.png)
style: contiene declaraciones de estilo CSS a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados .
![Resultado de imagen para atributo style html png](https://www.blogdephp.com/wp-content/uploads/2018/09/boton-rojo-css.png)
tabindex: indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre).
title: contiene un texto representado información relacionada al elemento al cual pertenece.
Ejemplo: <p title="Free Web tutorials">W3Schools.com</p>
![Resultado de imagen para atributo title html png](https://misapuntesyacimientos.files.wordpress.com/2016/01/atributos-11.png?w=840)
translate: es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio.
Ejemplo: <p translate="no">Don't translate this!</p>
![Resultado de imagen para atributo translate html png](https://developers.google.com/web/tools/chrome-devtools/inspect-styles/imgs/edit-as-html.png?hl=es)
Atributos de eventos
Ejemplo: <body onload="myFunction()">
Ejemplo: <body onunload="myFunction()">
Ejemplo: <button onclick="myFunction()">Click me</button>
Ejemplo: <button ondblclick="myFunction()">Double-click me</button>
onmousedown: el evento "onmousedown" es lanzado cuando el botón del mouse es presionado sobre el elemento (independientemente de que sea soltado o no).
Ejemplo: <p onmousedown="mouseDown()">Click the text!</p>
onmouseup: el evento "onmouseup" es disparado cuando el botón del mouse se suelta sobre el elemento.
Ejemplo: <p onmouseup="mouseUp()">Click the text!</p>
onmouseover: el evento "onmouseover" ocurre cuando el mouse es puesto sobre el elemento.
Ejemplo: <img onmouseover="bigImg(this)" src="smiley.gif" alt="Smiley">
onmousemove: el evento "onmousemove" es ejecutado cuando el mouse es movido mientras está sobre el elemento.
Ejemplo: <img onmousemove="bigImg(this)" src="smiley.gif" alt="Smiley">
onmouseout: el evento "onmouseout" es lanzado cuando el mouse se quita de encima de un documento.
Ejemplo: <img onmouseout="normalImg(this)" src="smiley.gif" alt="Smiley">
onfocus: el envento "onfocus" es disparado cuando un elemento recibe el enfoque, bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque: HTML a, HTML area, HTML label, HTML input, HTML select, HTML textarea, y HTML button.
Ejemplo: <input type="text" id="fname" onfocus="myFunction(this.id)">
onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">
onkeypress: el evento "onkeypress" es ejecutado cuando una tecla es presionada y luego soltada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" onkeypress="displayResult()">
onkeydown: el evento "onkeydown" es lanzado cuando una tecla es presionada (independientemente de que sea solatada o no) mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" onkeydown="myFunction()">
onkeyup: el evento "onkeyup" es disparado cuando una tecla es solatada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque.
Ejemplo: <input type="text" onkeyup="myFunction()">
onsubmit: el evento "onsubmit" ocurre cuando el formulario es enviado. Este evento es exclusivo del elemento HTML form.
Ejemplo: <form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
onreset: el evento "onreset" es ejecutado cuando el formulario es reestablecido a sus valores por defecto. Este evento es exclusivo del elemento HTML form.
Ejemplo: <form onreset="myFunction()">
Enter name: <input type="text">
<input type="reset">
</form>
onselect: el evento "onselect" es lanzado cuando un usuario selcciona texto en un campo de texto. Este evento es exclusivo de los elementos HTML input y HTML textarea.
Ejemplo: <input type="text" onselect="myFunction()" value="Hello world!">
onchange: el evento "onchange" es disparado cuando un control pierde el enfoque y su valor ha sido modificado desde que recibió el enfoque por última vez. Este evento es exclusivo de los elementos HTML input, HTML select y HTML textarea.
Ejemplo: <select onchange="myFunction()">
Atributos de foco
accesskey: Establece una tecla de acceso rápido a un elemento HTML.
Ejemplo: <a href="https://www.w3schools.com/html5" accesskey="h">HTML5</a><br>
tabindex: Establece la posición del elemento en el orden de tabulación de la página.
Ejemplo: <a href="http://www.google.com/" tabindex="1">Google</a>
onfocus, onblur: Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco.
Ejemplo: <input type="text" name="fname" id="fname" onblur="myFunction()">
No hay comentarios:
Publicar un comentario