Referencia de etiquetas para HTML 5 (Tomado de...

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


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>


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>


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


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>


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.


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>


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.


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


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


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>


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>



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



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



Módulo Texto

• Tag: cite

• Enmarca el título de un trabajo

<p><cite>The Scream</cite> por Edward Munch. Pintado en 1893.</p>



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)


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


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>



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>



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>



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>



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>



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


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>



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


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


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>



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>




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




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




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



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>



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


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



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



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.


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



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


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>


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)


Módulo Tablas

• Ejemplo:

<table border="1">

<tr>

<th>Mes</th>

<th>Gastos</th>

</tr>

<tr>

<td>Enero</td>

<td>$100</td>

</tr>

</table>


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>


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.


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


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


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>


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>


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)


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)



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



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)


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


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


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)


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>


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)


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>


• 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


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>


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)


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


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)


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>


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>


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>


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>


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>


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


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


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>


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)


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>


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


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


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


Referencia de etiquetas para HTML 5 (Tomado de...

Documents

Transcript of Referencia de etiquetas para HTML 5 (Tomado de...