referencia de etiquetas para html 5 (tomado de...
TRANSCRIPT
Referencia de etiquetas para HTML 5
(Tomado de w3c.org)
Esta referencia se distribuye bajo licencia Creative Commons. Usted es libre de: Copiar, distribuir y comunicar públicamente Hacer obras derivadas No Comerciales Bajo las condiciones siguientes: Reconocimiento: debe reconocer y dar crédito al autor original (Lic. Mauricio Jaques Soto)
Lic. Mauricio Jaques Soto
Módulos en HTML 5.0
Lic. Mauricio Jaques Soto
Módulo Estructural
• Declaration: DOCTYPE ▫ Es una declaracion empleada en html 5, debe estar en
la primer línea del documento html antes del elemento <html> ya que indica al navegador la versión de html con la que fue escrito el archivo
▫ En HTML 5.0 se escribe:
<!DOCTYPE html>
Lic. Mauricio Jaques Soto
Módulo Estructural
• Tag: html ▫ Representa la raíz del documento html, es el
contenedor para los demás elementos html, excepto el tag <!DOCTYPE>
<!DOCTYPE html> <html> <head>
<title>Title of the document</title> </head>
<body> The content of the document......
</body> </html>
Lic. Mauricio Jaques Soto
Módulo Estructural
• Tag: head • Es un contenedor para los elementos de la cabecera, debe
incluir un titulo (con el tag <title>), y puede incluir scripts, estilos, metainformación, entre otros.
• Los siguientes elementos pueden ser incluidos dentro del elemento head: ▫ title ▫ style ▫ link ▫ meta ▫ script ▫ noscript
Lic. Mauricio Jaques Soto
Módulo Estructural <html>
<head> <title>Titulo del documento</title>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<script type="text/javascript"> document.write(“Hola Mundo!") </script>
<noscript> Su navegador no soporta JavaScript! </noscript> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
<body> El contenido del documento......
</body> </html>
Lic. Mauricio Jaques Soto
Módulo Estructural
• Tag: title • Define el título del documento, es requerido en todos los
archivos html. ▫ Especifica un titulo en la barra de herramientas del navegador ▫ Provee un título para la página cuando es agregada a favoritos ▫ Despliega un título para la página en los resultados de buscadores
<head>
<title>Titulo del documento</title> </head> • Nota: No puedes tener más de dos elementos <title> en un
documento html.
Lic. Mauricio Jaques Soto
Módulo Estructural
• Tag: body
• Define el cuerpo del documento, contiene todos los
elementos html como texto, hiperenlaces, imágenes, tablas, listas, etc.
<body> El contenido del documento......
</body>
Lic. Mauricio Jaques Soto
Módulo Metainformación
Tag: meta El tag meta provee metadatos acerca del documento HTML. Los metadatos no serán desplegados en la página, pero podrán ser analizados por la máquina (cliente y/o servidor). Los meta-elementos son típicamente usados para especificar descripción, palabras clave, autor, modificaciones, entre otros datos del documento html. Siempre se colocará dentro del elemento head Pueden ser usados por los navegadores (como desplegar contenido, o recarga de página), motores de búsqueda (palabras clave), u otros servicios web.
Módulo Metainformación
Ejemplos:
1 - Define palabras clave para motores de búsqueda: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
2 - Define una descripción del sitio: <meta name="description" content="Tutoriales gratis de HTML y CSS " />
3 - Define la última revisión de tu página: <meta name="revised" content="Mauricio Jaques, 07/02/2012" />
Módulo Metainformación
4 – Recarga el documento cada 30 segundos:
<meta http-equiv="refresh" content="30" /> 5- Define juego de caracteres usado en el documento: <meta http-equiv="content-type" content="text/html; charset=UTF-8"> ** HTML5.- <meta charset="UTF-8"> 6- Define autor del documento: <meta name="author" content="Ståle Refsnes" /> Soporte: todos los navegadores
Módulo Scripts
Tag: script Es usado para definir un script del lado del cliente como Javascript. Puede contener declaraciones de secuencias de comandos o apuntar a un archivo externo de script mediante el atributo "src". Usos comunes de JavaScript son manipulación de imágenes, validación de formularios y cambios dinámicos de contenido.
Módulo Scripts
<script type="text/javascript"> document.write("Hola Mundo"); </script> Atributos: src --> Especifica la dirección del script Nota: Si se emplea el atributo src , el tag <script> debe estar vacío: <script type="text/javascript" src="programa.js"></script> Soporte: todos los navegadores
Módulo Scripts
Tag: noscript Es usado para mostrar contenido alternative para usuarios que han desactivado scripts en su navegador o tienen un navegador que no soporta scripts del lado del cliente Puede contener todos los elementos que se pueden encontrar dentro del cuerpo de una página html. <script type="text/javascript"> document.write("Hola desde Javascript!") </script> <noscript> El navegador no soporta JavaScript! </noscript>
Módulo Scripts
Tip: es buena práctica usar las etiquetas de comentarios para ocultar los scripts en los navegadores sin soporte a scripts del lado del cliente, para que no sean mostrados como texto plano: <script type="text/javascript"> <!-- function despliegaMensaje() { alert("Hola Mundo!") } //--> </script>
Nota: Las dos diagonales (//) es el símbolo de comentario para Javscript. Este impide que JS ejecute el --> tag. Soporte: todos los navegadores
Módulo Link
Tag: link Define la relación entre un documento y un recurso externo (hojas de estilo, imágenes, etc.) Se coloca dentro del elemento head y pueden existir más de un elemento link en un documento html <link rel="stylesheet" type="text/css" href="style.css" /> Atributos: href especifica localización del recurso enlazado rel Requerido. Especifica la relación entre el documento actual y el recurso enlazado. Normalmente son usados los valores stylesheet e icon type mime type Soporte: todos los navegadores
Módulo Hoja de Estilos
Tag: style Es usado para definir información de estilo para un documento html. Dentro del elemento <style> se debe especificar como los elementos html serán representados en el navegador. Cada documento html puede contener varias style tags. <style type="text/css"> h1 {color:#336699} p {color:#003366} </style> Atributos: type valor: text/css Soporte: todos los navegadores
Módulo Texto
• Tag: abbr
• Indica una abreviatura o un acrónimo como WWW
(world wide web) o W3C (www consortium)
• La <abbr title=" world wide web ">WWW</abbr> .
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto • Tag: address
• Define la información de contacto para el autor o propietario de un documento o un artículo. Si el elemento address está dentro del elemento body, representa la información de contacto para el documento. Si el elemento address está dentro de un elemento <article>, representa la información de contacto de dicho artículo.
• El texto en el elemento address se representa normalmente en cursiva. La mayoría de los navegadores agregará un salto de línea antes y después del elemento de dirección.
<address> Written by <a href="mailto:[email protected]">Jon Doe</a>.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA </address>
Lic. Mauricio Jaques Soto
Módulo Texto • Tag: article
• La etiqueta de artículo especifica contenido independiente, autónomo.
• Un artículo debe tener propio sentido y debería ser posible distribuir de forma independiente del resto del sitio.
• Ejemplos de artículos respuesta en un foro, artículo de periódico, entrada de blog, comentarios de usuarios
<article>
<h3>Netscape esta muerto</h3>
<p><a href="http://blog.netscape.com/2007/12/28/end-of-support-for-netscape-web-browsers">Fin de soporte para navegadores Netscape </a>. Netscape fue conocido por muchos como el líder en la navegación por la web y ha desarrollado una serie de piezas complementarias de software que permite un completo conjunto de herramientas de internet.</p>
</article>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto • Tag: blockquote
• Especifica una sección que es referencia de otra fuente. Los navegadores generalmente dan sangría al contenido referenciado
<blockquote cite="http://www.worldwildlife.org/who/index.html">
AOL tiene una larga historia en internet, siendo una de las primeras empresas en realmente conseguir personas en línea.
</blockquote>
• Atributo:
• citeespecifica la fuente de la referencia
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Tag: br
• Inserta un salto de línea, es una etiqueta vacía
<p>Este texto contiene<br />un salto de línea.</p>
• Nota: usar esta etiqueta para insertar saltos de línea no para separar párrafos
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Tag: cite
• Enmarca el título de un trabajo
<p><cite>The Scream</cite> por Edward Munch. Pintado en 1893.</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Etiquetas de Frase
Tag Descripcion
<em> Texto enfatizado (cursiva)
<strong> Texto importante (negrita)
<dfn> Definición de término (cursiva)
<code> Define un fragmento de código de programación
<samp> Define salida de ejemplo de un programa de computadora
<kbd> Define entrada de teclado
<var> Define una variable (cursiva)
Lic. Mauricio Jaques Soto
Módulo Texto
Ejemplos:
<em>Texto enfatizado</em>
<strong>Texto resaltado</strong>
<dfn>Definición de término</dfn>
<code>Código de computadora</code>
<samp>Ejemplo de salida de programa de computadora </samp>
<kbd>Entrada de teclado</kbd>
<var>Variable</var>
Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Tag: p
• Define un párrafo. Los navegadores automáticamente
agregan espacio antes y después de cada elemento <p>
<p>Algo de texto en un párrafo.</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Tag: pre
• Define texto con formato previo. Normalmente aparece con fuente Courier y conserva espacios y saltos de línea.
<pre> Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Tag: q
• Define una cita corta. Normalmente los navegadores suelen insertar la cita entre comillas
<p>La meta de la WWF's es:
<q>construir un futuro donde la gente viva en armonía con la naturaleza</q>.
Esperemos que esto suceda.</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto • Tag: h1 … h6
• Especifican etiquetas de encabezado. Dependiendo del número es la importancia y tamaño de la letra del encabezado, la etiqueta h1 enmarca el encabezado más importante y h6 el de menor importancia.
<h1>Cabecera 1</h1>
<h2>Cabecera 2</h2>
<h3>Cabecera 3</h3>
<h4>Cabecera 4</h4>
<h5>Cabecera 5</h5>
<h6>Cabecera 6</h6>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto
• Tag: div
• Define una división o una sección de un documento HTML. Se utiliza para agrupar elementos de bloque y darles formato con CSS.
<div style="color:#00FF00">
<h3>Cabecera</h3>
<p>Esto es un párrafo.</p>
</div>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto • Tag: span
• Se utiliza para agrupar elementos en línea en un documento. Proporciona una manera de agregar un enlace a una parte del texto o de una parte de un documento.
<p>HTML 5.0 es una <span style="color:lightblue">versión</span> del
lenguaje de hipertexto.</p>
• Tip: cuando un texto está enganchado en un elemento span se puede cambiar el estilo a ese texto, o manipularlo con JavaScript por ejemplo.
Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Lista
• Tags: dl dd dt • Especifica una lista de definiciones, es usado en conjunto
con el tag <dt> (declara el elemento en la lista) y <dd> (describe el elemento en la lista).
<dl> <dt>Café</dt>
<dd>Bebida caliente</dd>
<dt>Jugo</dt>
<dd>Bebida fresca de frutas</dd>
</dl>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Lista • Tag: ol • Define una lista ordenada. Se deberá usar el tag <li> para
enumerar los elementos de la lista <ol type="i">
<li>Café</li> <li>Te</li> <li>Jugo</li>
</ol>
• Atributos para ol:
▫ startespecifica el valor de inicio de una lista ordenada
▫ typetipo de marcador usado en la lista: i (romanos minúscula), I (romanos mayúscula), a A (letras minúscula, mayúscula), 1 (numérico - default)
• Atributo para li:
▫ valueindica valor de un elemento de la lista
Lic. Mauricio Jaques Soto
Módulo Lista
• Tag: ul
• Define una lista sin ordenar (con viñetas). Se deberá usar el tag <li> para enumerar los elementos de la lista
<ul>
<li>Café</li>
<li>Te</li>
<li>Jugo</li>
</ul>
• Soporte (ul, ol ,li): todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Texto Bidireccional
• Tag: bdo • El tag bdo es usado para cambiar la dirección del texto • Atributos • dirRequerido. Especifica direccion del texto dentro del
element bdo (valores: ltr / rtl) <p><bdo dir="rtl">Este párrafo va de derecha a
izqueirda.</bdo></p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Presentación
• Tag: b
• Especifica texto en negrita
<p>La <b>sintaxis</b> de HTML 5 esta basada en <b>XHTML</b> agregando nuevas etiquetas.</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Presentación
• Tag: i
• Especifica texto en cursiva. Puede usarse para indicar un término técnico, una frase de otro idioma, un pensamiento, o un nombre, etc.
<p>El nombró a su auto <i>El rayo</i>, porque era muy rápido.</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Presentación
• Tag: hr
• Define una ruptura temática en una página html (un cambio de tema), se utiliza para separar el contenido
<h1>HTML</h1>
<p>HTML es un lenguaje para estructurar páginas web.....</p>
<hr />
<h1>CSS</h1> <p>CSS define formato de elementos html.....</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Presentación
• Tag: small
• Define texto más pequeño. Puede emplearse para comentarios, definiciones, etc.
<p>HTML 5 – Última revisión del lenguaje básico de la World Wide Web.</p>
<p><small>Copyright © 2012 W3C ®</small></p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Presentación • Tags: sub sup
• <sub> define subíndice. Aparece debajo de la línea de base. El texto Subíndice puede utilizarse para fórmulas químicas, como H2O.
• <sup> define un texto de superíndice. Aparece por encima de la línea de base. El texto de superíndice puede utilizarse para notas al pie, como WWW .
<p>Este texto contiene la etiqueta<sub>subscript</sub> de texto.</p>
<p>Este texto contiene la etiqueta <sup>superscript</sup> de texto.</p>
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Hipertexto • Tag: a
• El tag <a> define un hiperenlace, el cuál es usado como enlace de una página a otra.
<a href="http://http://www.w3.org" target=”_blank”>Visita Consorcio WWW</a>
• Atributos:
▫ El atributo más importante es href que indica el destino del enlace. Por default, el enlace aparecerá en todos los navegadores como lo siguiente:
▫ Un enlace sin visita es color azul y subrayado
▫ Un enlace visitado púrpura y subrayado
▫ Un enlace activo, color rojo subrayado
Lic. Mauricio Jaques Soto
Módulo Hipertexto • target valores: _blank (carga página en otra
ventana)
_parent _self (carga página en misma ventana) _top
*Especifica donde se abrirá el documento enlazado
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Imagen • Tag: img
• Define una imagen en un documento HTML, tiene dos atributos requeridos src y alt
• Las imágenes no son insertadas en la página html, sino que son enlazadas y el tag <img> crea un apartado para la imagen referenciada
<img src="angry.gif" alt="Angry face" />
• Atributos:
• srcrequerido. Especifica la dirección de una imágen
• altrequerido. Especifica un texto alternativo a una imagen. (en el caso de que no cargue la imagen)
• titlemensaje que aparece cuando se coloca el puntero del mouse sobre la imágen
• heightaltura de una imagen
• widthancho de una imagen
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Objeto • Tag: object
• Define un objeto embebido en un documento HTML. Se puede utilizar para incrustar multimedia (audio, video, applets Java, objetos ActiveX, documentos PDF y animaciones Flash), en documentos web.
• También puede usarse para incorporar otra página Web en un documento html.
<object width="400" height="400" data="helloworld.swf"></object>
• Nota: un elemento <object> debe incluirse dentro del elemento <body>. El texto entre <object> y </object> es alternativo para navegadores que no soportan esta etiqueta.
Lic. Mauricio Jaques Soto
Módulo Objeto
• Tip: al menos un atributo data o type debe ser definido
• Atributos:
• heightaltura del objeto
• widthancho del objeto
• dataespecifica la dirección del recurso a mostrar en la etiqueta object
• typemime type
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Tablas • Tag: table • Define una tabla. Consta de elementos como tr th y td.
• El elemento tr define una fila de la tabla, el elemento th marca un encabezado de tabla y el elemento td precisa una celda de la tabla.
<table border="1">
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
</table>
• Una tabla html más compleja, se compone de los elementos; caption, col, colgroup, thead, tfoot y tbody
• Atributos:
• border solo admite valor nulo (“”) y 1
Lic. Mauricio Jaques Soto
Módulo Tablas
• Tag: tr
• La etiqueta tr define una fila en una tabla HTML.
• Un elemento tr contiene uno o más elementos th o td.
<table border="1">
<tr>
<td>Celda A</td>
<td>Celda B</td>
</tr>
</table>
Lic. Mauricio Jaques Soto
Módulo Tablas • Tag: td th
• La etiqueta td define una celda estándar en una tabla HTML. La etiqueta th define una celda de cabecera
• Una tabla HTML tiene dos tipos de celdas:
• celdas de encabezado - contiene información de encabezado (creada con el elemento th: contenido en negrita y centrado por defecto)
• celdas estándar - contiene datos (creados con el elemento td: son regulares y alineados a la izquierda de forma predeterminada)
Lic. Mauricio Jaques Soto
Módulo Tablas
• Ejemplo:
<table border="1">
<tr>
<th>Mes</th>
<th>Gastos</th>
</tr>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
</table>
Lic. Mauricio Jaques Soto
Módulo Tablas • Tag: caption
• Define un título para la tabla, debe insertarse inmediatamente después de la etiqueta table, además solo puede especificarse un elemento caption por tabla
<table border="1">
<caption>Gastos Mensuales</caption>
<tr>
<th>Mes</th>
<th>Gastos</th>
</tr>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
</table>
Lic. Mauricio Jaques Soto
Módulo Tablas • Tag: colgroup
La etiqueta de colgroup especifica un grupo de una o más columnas en una tabla para dar formato. Es útil para aplicar estilos a las columnas enteras, en lugar de repetir los estilos para cada celda, para cada fila.
• Nota: la etiqueta de colgroup debe estar dentro de un elemento table, después de cualquier elemento de título y antes de cualquier elemento thead, tbody, tfoot y tr.
• Tip: para definir distintas propiedades para una columna dentro de una colgroup, utilice la etiqueta col dentro de la etiqueta colgroup.
Lic. Mauricio Jaques Soto
Módulo Tablas • Tag: col
• La etiqueta de col especifica las propiedades de columna para cada columna dentro de un elemento colgroup.
• La etiqueta de es útil para aplicar estilos a las columnas enteras, en lugar de repetir los estilos para cada celda, para cada fila.
<table border="1">
<colgroup>
<col span="2" style="background-color:red" />
<col style="background-color:yellow" />
</colgroup>
<tr>
<th>ISBN</th>
<th>Titulo</th>
<th>Precio</th>
</tr> …
Lic. Mauricio Jaques Soto
Módulo Tablas <tr>
<td>3476896</td>
<td>Paginas web HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>Estilos con CSS</td>
<td>$49</td>
</tr>
</table>
• Atributos:
• span define el número de columnas que el colgroup debe abarcar
Lic. Mauricio Jaques Soto
Módulo Tablas • Tag: thead, tbody, tfoot
• Estos elementos especifican cada parte de una tabla; thead: cabecera; tbody: cuerpo; tfoot:pie.
• No afectan el diseño de la tabla por defecto.
<table border="1"> <thead> <tr> <th>Mes</th> <th>Gastos</th> </tr> </thead>
<tfoot> <tr> <td>Suma</td> <td>$180</td> </tr> </tfoot>
<tbody> <tr> <td>Enero</td> <td>$100</td> </tr> <tr> <td>Febrero</td> <td>$80</td> </tr> </tbody> </table>
Lic. Mauricio Jaques Soto
Módulo Formularios
• Tag: form
• Empleado para crear formularios para entrada de datos, puede contener uno o más de los siguientes elementos:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<label>
Lic. Mauricio Jaques Soto
Módulo Formularios <form name=”mi_form” action="demo_form.asp" method=”post” >
Nombre: <input type="text" name="nombre" value="Mickey" /><br />
Apellido:<input type="text" name="apellido" value="Mouse" /><br />
<input type="submit" value="submit" />
</form>
• Atributos: • name nombre del formulario • methodmétodo http empleado para enviar
información (valores: post, get) • actiondirección (url) que recibirá la información • targetdonde mostrar la respuesta que se reciba del
formulario (valores: _blank, _self, _parent, _top)
Lic. Mauricio Jaques Soto
Módulo Formularios
• enctypemetodo de codificación de datos del formulario cuando se envían al servidor (solo para method=”post”) (valores: application/x-www-form-urlencoded multipart/form-data text/plain)
• autocompletefunción autocompletar de navegadores (valores: on [default], off)
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Formularios • Tag: label
• El elemento label proporciona una mejora de la facilidad de uso, porque si el usuario hace clic en el texto dentro del elemento label, su campo de entrada obtiene el “foco” o es seleccionado, en el caso de los input type checkbox y radio. Para realizar esto se deberá emplear el atributo id en el campo de entrada, el cual deberá tener el mismo valor, que el atributo for del elemento label
<form>
<label for=“hombre">Hombre</label>
<input type="radio" name="sexo" id=“hombre" />
<br />
<label for=“mujer">Mujer</label>
<input type="radio" name="sexo" id=“mujer" />
</form>
• Atributos:
• forvalor en texto relacionado con el id de un campo de entrada de datos
• Soporte: todos los navegadores
Lic. Mauricio Jaques Soto
Módulo Formularios • Tag: input
• Especifica un campo de entrada donde el usuario puede introducir datos, los elementos <input> se emplean dentro del elemento <form> para declarar controles de entrada de datos.
• Estos controles de entrada pueden variar dependiendo de lo especificado en el atributo type.
• Nota: La etiqueta <input> es un elemento vacío, solo contiene atributos.
• Tip: Usar el elemento <label> para definir etiquetas para los elementos <input>.
• Atributos:
• namenombre del elemento input (valor: texto)
• valuevalor predefinido para un elemento input (normalmente type text) (valor: texto)
Lic. Mauricio Jaques Soto
Módulo Formularios • disabledcampo desactivado, inutilizable (valor: disabled) nota: no
funciona con input hidden
• readonlycampo de solo lectura (valor: readonly)
• checkedelemento seleccionado (normalmente para input type radio y checkbox) (valor: checked)
• requiredcampo obligatorio (valor: required)(para campos; text, search, password, checkbox, radio y file)
• sizeespecifica ancho en caracteres (valor: numérico)
• maxlengthespecifica el número máximo de caracteres permitido en un elemento input (normalmente type text, password)
• autocompletefunción autocompletar de algunos navegadores(valores: on, off)(text, search, password, range)
• placeholder describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una breve descripción del formato esperado). La pista se muestra en el campo de entrada cuando está vacía y desaparece cuando el campo obtiene el foco. (text, password)
• ididentificador
Lic. Mauricio Jaques Soto
Módulo Formularios • Typedefine tipo de elemento de entrada:
▫ button: botón al que puede asignarse métodos y funciones con scripts
▫ submit: botón de envío de formulario
▫ reset: botón de borrado de información de formulario
▫ hidden: elemento oculto
▫ text: elemento que permite entrada de datos en texto plano
▫ password: elemento que permite entrada de datos en texto plano no visible
▫ checkbox: caja de selección (pueden seleccionarse más de una) nota: deben tener el mismo texto en el atributo name.
▫ radio: botón de selección (sólo puede seleccionarse uno) nota: deben tener el mismo texto en el atributo name.
▫ search: campo de texto búsqueda
▫ range: barra deslizable
▫ file: subir archivos
Lic. Mauricio Jaques Soto
Módulo Formularios • Tag: button
• Define un botón activo. Puede contener texto o imágenes. Esta es la diferencia entre este elemento y botones creados con el elemento input
<button type="button">Clic!</button>
• Tip: Siempre debe especificarse el atributo “type” para un elemento <button>.
• Atributos:
• autofocuspermite que el botón tenga el “foco” cuando carga la página (autofocus)
• disabled botón inhabilitado (disabled)
• name puede especificar un nombre(texto)
• type especifica tipo de botón (button, reset, submit)
• value permite asignar un valor (texto)
Lic. Mauricio Jaques Soto
Módulo Formularios • Tags: select, option, optgroup
• El elemento select se usa para crear una lista desplegable.
• Las etiquetas option dentro del elemento select definen las opciones disponibles en la lista desplegable.
• El elemento optgroup se utiliza para agrupar opciones relacionadas en una lista desplegable, en el caso de tener una larga lista de opciones, los grupos de opciones relacionadas son fáciles de manejar para un usuario.
<select> <optgroup label=“autos_suecos">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label=“autos_alemanes">
<option value="vw">VW</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Lic. Mauricio Jaques Soto
Módulo Formularios
• Atributos
• disabled lista inhabilitada (valor: disabled)
• name puede especificar un nombre (texto)
• sizeespecifica ancho en caracteres (valor: numérico)
• multipleespecifica si pueden seleccionarse más de un elemento a la vez (valor: multiple) para <option>
• valuevalor de la opción (texto)
• selectedopción seleccionada por default (valor: selected)
Lic. Mauricio Jaques Soto
Módulo Formularios • Tag: textarea
• Define un control de entrada de texto multilínea. Puede contener un número ilimitado de caracteres. El tamaño de un elemento textarea puede especificarse mediante los atributos cols y rows.
<textarea rows="4" cols="50">
En w3c encontrarás información de tecnologías aplicables en la web; lenguajes, diseño, arquitectura, y demás.
</textarea>
Lic. Mauricio Jaques Soto
• Atributos:
• colsespecifica el ancho visible del área de texto (valor numérico)
• rowsespecifica el número de líneas visible en el área de texto (valor numérico)
• placeholder describe el valor esperado de un campo de entrada (por ejemplo, un valor de muestra o una breve descripción del formato esperado). La pista se muestra en el campo de entrada cuando está vacía y desaparece cuando el campo obtiene el foco. (text, password)
• disabledcampo desactivado, inutilizable (valor: disabled) nota: no funciona con input hidden
• readonlycampo de solo lectura (valor: readonly)
• namenombre del elemento input (valor: texto)
• requiredcampo obligatorio (valor: required)(para campos; text, search, password, checkbox, radio y file)
• maxlengthespecifica el número máximo de caracteres permitido en un elemento input (normalmente type text, password)
Módulo Formularios Lic. Mauricio Jaques Soto
Lic. Mauricio Jaques Soto
Etiquetas de HTML 5.0
Aside
• Indica algún texto que está relacionado con el contenido alrededor de un artículo o página web.
<p>El año pasado visité la aldea digital.</p>
<aside> <h4>Aldea Digital</h4>
<p>La aldea digital es un evento relacionado a la computación, gadgets y tecnología.</p>
</aside>
Lic. Mauricio Jaques Soto
Audio
• Define recurso de sonido en diferentes formatos de música digital <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mp3" /> Tu navegador no soporta el tag audio. </audio> • Tip: Cualquier testo dentro de las etiquetas <audio> y </audio> serán
desplegados en navegadores que no soporten este elemento Atributos: • autoplayespecifica si el archive de audio comenzará a reproducirse una
vez terminada la carga (valor: autoplay) • controlscontroles de audio disponibles (start, pause, etc.) (valor: controls) • loopespecifica repetición indefinida del archive de audio (valor: loop) • srcespecifica la dirección del archivo de audio (valor: url válida)
Lic. Mauricio Jaques Soto
Details
• Especifica detalles adicionales que el usuario puede ver u ocultar. • La etiqueta de detalles puede usar para crear un widget interactivo que el usuario puede
abrir y cerrar. Dentro de éste elemento, puede ponerse cualquier tipo de contenido, a su vez, éste no puede ser visible a menos que se establezca el atributo open.
<details>
<summary>Copyright 1999-2011.</summary> <p> - by Refsnes Data. All Rights Reserved.</p> <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details> • Tip: la etiqueta <summary> se utiliza para especificar un título visible para el elemento
<details>. Puede hacer clic en el encabezado para ver u ocultar los detalles. • Atributos • Open especifica que el contenido en details puede ser visible (valor: open) • Soporte: chrome
Lic. Mauricio Jaques Soto
Embed
• Define un contenedor para una aplicación externa o contenido interactivo (un plug-in)
<embed src="helloworld.swf" /> • Atributos:
• height especifica la altura del contenido (valor:
pixeles) • src especifica la dirección del contenido(valor:
dirección url del contenido) • typeespecifica el tipo del contenido (valor: mime type) • widthespecifica el ancho del contenido (valor: pixeles)
Lic. Mauricio Jaques Soto
Figcaption
• La etiqueta <figcaption> define un título para un elemento del elemento <figure>.
• El elemento <figcaption> puede colocarse como el
primer o el último elemento secundario del elemento <figure>.
<figure> <img src=“tepotzotlan.jpg" alt=“Tepotzotlan" width="304" height="228" /> <figcaption>Fig1. – Una vista del museo del virreinato.</figcaption> </figure>
Lic. Mauricio Jaques Soto
Figure
• La etiqueta <figure> especifica contenido autónomo, como ilustraciones, diagramas, fotos, listados de código, etc.
<figure> <img src=“tepotzotlan.jpg" alt=“Tepotzotlan" width="304" height="228" /> </figure>
Lic. Mauricio Jaques Soto
Footer
• La etiqueta de <footer> define un pie de página de un documento o sección.
• Este elemento de debe contener información acerca del autor del documento, la información de copyright, enlaces a términos de uso, información de contacto, etc.
• Se puede tener varios elementos <footer> en un solo documento.
<footer>
<p>Publicado por: Pedro</p> <p>Fecha "2012-03-01"</p> </footer>
Lic. Mauricio Jaques Soto
Header
• Tag header • No confundir con la etiqueta <head> de un document
html • Especifica un encabezado de un documento o sección. • Debe utilizarse como un contenedor para el contenido
introductorio o un conjunto de vínculos de navegación.
<header> <h1>Internet Explorer 9</h1> </header> <p>Windows Internet Explorer 9 (abreviado como IE9)
fue lanzado para el público el 14 de marzo de 2011 </p>
Lic. Mauricio Jaques Soto
Mark
• Define texto marcado, puede usarse para resaltar partes de un texto.
<p>No olvidar presentación para<mark>el curso de html</mark>.</p>
Lic. Mauricio Jaques Soto
Meter
• La etiqueta meter define una medida escalar dentro de un rango conocido, o un valor fraccionario. Esto también es conocido como un indicador. Ejemplos: uso del disco, la importancia de un resultado de la consulta, etc.
<meter value="3" min="0" max="10" >2 de
10</meter><br /> <meter value="0.6">60%</meter> • Nota: la etiqueta <meter> no debe utilizarse para
indicar el avance (como en una barra de progreso). Para barras de progreso, utilice la etiqueta <progress>.
Lic. Mauricio Jaques Soto
Meter
• Atributos:
• highrango considerado como valor alto (valor: numérico) • lowrango considerado como valor bajo (valor: numérico) • maxmáximo valor del rango (valor: numérico) • minmínimo valor del rango (valor: numérico) • optimumvalor óptimo para el medidor (valor: numérico) • valueObligatorio. Especifica el valor actual de los
indicadores (valor: numérico) • Actualmente solo es soportado por Opera y Chrome
Lic. Mauricio Jaques Soto
Nav
• La etiqueta <nav> de define una sección de vínculos de navegación. • No todos los enlaces de un documento deben estar dentro de éste
elemento . • Éste elemento está destinado sólo a grandes bloques de vínculos de
navegación. <nav>
<a href="/html/">HTML</a> | <a href="/html5/">HTML5</a> | <a href="/css/">CSS</a> | <a href="/css3/">CSS3</a> | <a href="/js/">JavaScript</a> </nav>
Lic. Mauricio Jaques Soto
Progress • Representa el progreso de una petición, alguna descarga de archivos o
tarea. Progreso de Descarga: <progress value="22" max="100"> </progress> <p><b>Nota:</b>El element progress es actualmente soportado por Firefox,
Opera y Chrome.</p> • Tip: Utilice la etiqueta de progreso junto con JavaScript para mostrar el
progreso de una tarea. • Nota: la etiqueta de progreso no es apta para representar un indicador (por
ejemplo, uso de espacio de disco o relevancia de un resultado de consulta). Para representar un medidor, utilice la etiqueta <meter>.
• Atributos: • valueEspecifica cuánto de la tarea se ha completado (valor: numérico) • maxEspecifica cuánto trabajo requiere de la tarea en total (valor:
numérico)
Lic. Mauricio Jaques Soto
Section
• La etiqueta <section> de define las secciones en un documento. Como capítulos, encabezados, pies de página o cualquier otras secciones del documento.
<section>
<h1>WWF</h1> <p> El Fondo Mundial para la naturaleza
(WWF)....</p> </section>
Lic. Mauricio Jaques Soto
Source • La etiqueta source se utiliza para especificar recursos de medios
múltiples para elementos multimedia, como audio y video. • Permite especificar archivos de audio y vídeo alternativos que puede
elegir el navegador, basado en su tipo de medio o códec de comunicación.
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Tu navegador no sporta el tag audio. </audio> • Atributos: • mediaespecifica el tipo de recurso de medios • srcespecifica la url del recurso • typeespecifica mime type del recurso
Lic. Mauricio Jaques Soto
Video • Especifica un clip de película o cualquier otro
formato de video <video width="320" height="240"
controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Tu navegador no sporta el tag video. </video> • Tip: cualquier texto entre las etiquetas <video> y
</video> será desplegado en navegadores que no soporten este elemento
Lic. Mauricio Jaques Soto
Video
• Atributos:
• autoplayespecifica la autoreproducción del video una vez haya cargado(valor: autoplay)
• controls especifica la disponibilidad de los controles para la reproducción del video (valor: controls)
• loop especifica la repetición constante de un video (valor: loop) • poster especifica una imagen que se muestra mientras se está
descargando el video, o hasta que el usuario pulsa el botón de reproducir (valor: url de la imagen)
• heightestablece la altura del reproductor de video (valor numérico)
• widthestablece el ancho del reproductor de video (valor numérico)
• srcdirección url del video
Lic. Mauricio Jaques Soto