Etiquetas y atributos en HTML

Desarrollo de Aplicaciones Web

Etiquetas y atributos en HTML y CSS

Contenido:


  1. Etiquetas
  2. Atributos

Etiquetas

Lenguajes de etiquetas

  • Los primeros archivos solo contenían texto sin formato


  • Se codificaban las letras del alfabeto y se pasaban a números


  • La transformación de caracteres en secuencias de números se denomina codificación de caracteres, por ejemplo codificación ASCII


  • Codificación de texto con formato. Marcar mediante etiquetas


  • Lenguajes de etiquetas

  • HTML define 116 etiquetas que se pueden utilizar para marcar los elementos


  • Algunas son obsoletas (ej.: center, dir, font)


  • Las páginas complejas precisan algo más


  • Algunos elementos como las imágenes y los enlaces necesitan información adicional


  • Lenguajes de etiquetas

    Etiquetas en HTML:

    a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var

    Lenguajes de etiquetas

  • Cada etiqueta tiene su propia lista de atributos disponibles


  • Se dividen en cuatro grupos según su funcionalidad:


    • Básicos: se pueden utilizar en todas las etiquetas


    • Internacionalización: en las páginas que muestran sus contenidos en varios idiomas


    • Eventos: en las páginas con JavaScript


    • Foco: relacionados principalmente con la accesibilidad de los sitios


    Atributos

    Atributos básicos

    id = "texto" Establece un identificador único a cada elemento dentro de una página HTML
    class = "texto" Establece la clase CSS que se aplica a los estilos del elemento
    style = "texto" Establece de forma directa los estilos CSS de un elemento
    title = "texto" Establece el título a un elemento

    Atributos internacionalización

    lang = "codigo idioma" Indica el idioma del elemento mediante un código predefinido
    xml:lang = "codigo de idioma" Indica el idioma del elemento mediante un código predefinido
    dir Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)

    Atributos de eventos

    onblur Deseleccionar el elemento
    onchange Deseleccionar un elemento que se ha modificado
    onclick Pinchar y soltar el ratón
    ondblclick Pinchar dos veces seguidas con el ratón
    onfocus Seleccionar un elemento
    onkeydown Pulsar una tecla (sin soltar)
    onkeypress Pulsar una tecla

    Atributos de eventos

    onkeyup Soltar una tecla pulsada
    onload La página se ha cargado completamente
    onmousedown Pulsar (sin soltar) un botón del ratón
    onmousemove Mover el ratón
    onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento)

    Atributos de eventos

    onmouseover El ratón "entra" en el elemento (pasa por encima del elemento)
    onmouseup Soltar el botón que estaba pulsado en el ratón
    onreset Inicializar el formulario (borrar todos sus datos)
    onresize Se ha modificado el tamaño de la ventana del navegador
    onselect Seleccionar un texto
    onsubmit Enviar el formulario
    onunload Se abandona la página (por ejemplo al cerrar el navegador)

    Atributos de foco

    accesskey = "letra" Establece una tecla de acceso rápido a un elemento HTML
    tabindex = "numero" Establece la posición del elemento en el orden de tabulación de la página
    onfocus, onblur Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco