DPWyR: octubre 2019

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

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

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

width yheight: 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

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

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>

lang: Con este atributo se declara el lenguaje.

Ejemplos: <html lang="en-US">

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>

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

class: es una lista de las clases del elemento separada por espacios.

Ejemplo: <h1 class="intro">Header 1</h1>

Resultado de imagen para atributo class png

contenteditable: es un atributo enumerado que indica si el elemento debe de ser editable por el usuario.

Ejemplo: <p contenteditable="true">This is an editable paragraph.</p>

Resultado de imagen para atributo contenteditable png

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.

Ejemplo: <li data-animal-type="bird">Owl</li>

Resultado de imagen para atributo data-*png

dir: es un atributo enumerado que indica la direccionalidad del texto de los elementos.

Ejemplo: <p dir="rtl">Write this text right-to-left!</p>

Resultado de imagen para atributo dir en png

draggable: es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el HTML Drag and Drop API.

Ejemplo: <p draggable="true">This is a draggable paragraph.</p>

Resultado de imagen para atributo draggable html png

dropzone: es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and DroP.

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>

Resultado de imagen para atributo hidden html png

id: define un identificador único (ID) el cual no debe repetirse en todo el documento.

Ejemplo: <h1 id="myHeader">Hello World!</h1>

Resultado de imagen para atributo id html png

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.

Ejemplo: <p lang="fr">Ceci est un paragraphe.</p>

Resultado de imagen para atributo lang html png

spellcheck: es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado.

Ejemplo: <p contenteditable="true" spellcheck="true">This is a paragraph.</p>

Resultado de imagen para atributo spellcheck html 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 .

Ejemplo: <p style="color:green">This is a paragraph.</p>

Resultado de imagen para atributo style html 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).

Ejemplo: <a href="https://www.w3schools.com/" tabindex="2">W3Schools</a>

Resultado de imagen para atributo tabindex html png

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

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

Atributos de eventos

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.

Ejemplo: <body onload="myFunction()">

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.

Ejemplo: <body onunload="myFunction()">

onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento.

Ejemplo: <button onclick="myFunction()">Click me</button>

ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento.

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">

</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">

</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()">

DPWyR

miércoles, 23 de octubre de 2019

Javascript

sábado, 5 de octubre de 2019

ASP Y JAVA

viernes, 4 de octubre de 2019

ATRIBUTOS DE HTML

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.

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.

Css