Textos - Schoology

CONSEJO DE EDUCACIÓN TÉCNICO PROFESIONAL
Universidad del Trabajo del Uruguay
Escuela Técnica Washington Lockhart
EL LENGUAJE
HTML
Programación para la web
Walter Nores
www.walternores.com
2015
Índice de contenido
Introducción al lenguaje HTML ........................................................................................................ 4
El documento web .............................................................................................................................. 5
Cabecera ............................................................................................................................................. 7
Título .................................................................................................................................................. 7
Metas .................................................................................................................................................. 7
Cuerpo de la página............................................................................................................................ 8
Comentarios ....................................................................................................................................... 8
Salto de línea ...................................................................................................................................... 8
Párrafos .............................................................................................................................................. 8
Línea horizontal ................................................................................................................................. 9
Textos ................................................................................................................................................. 9
Texto preformateado...................................................................................................................... 9
Formato de texto personalizado .................................................................................................... 9
Imágenes .......................................................................................................................................... 10
Listas ................................................................................................................................................ 10
No ordenadas ............................................................................................................................... 10
Ordenadas .................................................................................................................................... 11
Enlaces ............................................................................................................................................. 13
Anclas .......................................................................................................................................... 13
Tablas ............................................................................................................................................... 13
Capas ................................................................................................................................................ 15
El atributo style ................................................................................................................................ 15
Incrustar video, audio, PDFs, Java applets y paginas web .............................................................. 17
Formularios ...................................................................................................................................... 17
Controles ..................................................................................................................................... 18
Caja De Texto .............................................................................................................................. 19
Texto simple ........................................................................................................................... 19
Texto de contraseñas ............................................................................................................... 19
Área De Texto ......................................................................................................................... 20
Selección de archivo local ........................................................................................................... 20
Botón Radial ................................................................................................................................ 21
Casilla De Verificación ................................................................................................................ 21
Campos Ocultos .......................................................................................................................... 21
Listas Desplegables ..................................................................................................................... 22
Selección Simple .................................................................................................................... 22
Selección Múltiple .................................................................................................................. 24
Rotulo de campos ........................................................................................................................ 24
Agrupar campos .......................................................................................................................... 25
Botón De Envío ........................................................................................................................... 25
Botón De Restablecer .................................................................................................................. 25
Eventos ............................................................................................................................................. 26
HTML5 ............................................................................................................................................ 27
Nuevas tipos de entrada para formularios ................................................................................... 27
Formato direccion de Email ................................................................................................... 27
Selector de color ..................................................................................................................... 28
Formato Fecha ........................................................................................................................ 28
Selector de Rango ................................................................................................................... 28
Formato Teléfono.................................................................................................................... 28
Formato URL.......................................................................................................................... 28
El atributo pattern (expresiones regulares) ............................................................................. 29
Pag. 2
El atributo required ................................................................................................................. 29
File. Seleccion de archivos ..................................................................................................... 29
Formato Audio ........................................................................................................................ 30
Datalist .................................................................................................................................... 30
Canvas .................................................................................................................................... 30
Pag. 3
Introducción al lenguaje HTML
HTML significa Lenguaje de Marcado de HiperTexto (HyperText Markup Language), es una
codificación mediante la cual se programan las páginas web.
Un documento web es un archivo que el navegador web o browser es capaz de interpretar para ser
visualizado por el usuario, lo hace identificando las etiquetas o tags existentes en el y sus respectivos
atributos. Una etiqueta es un espacio delimitado por un símbolo de apertura <, y de cierre >, en el
cual se expresan los elementos o el comportamiento que va a reflejarse en el navegador web.
Algunos de los desafíos han sido el inconveniente existente entre los navegadores web entre los
cuales no existe una compatibilidad total.
Existen básicamente dos formas en el uso de las etiquetas:
 Las que pueden encerrar o contener otros elementos: <etiqueta> ... </etiqueta>
indicando la barra inclinada / en la etiqueta de cierre.

Aquellas que sencillamente representan un elemento <etiqueta> o <etiqueta />
Algunas etiquetas tienen características o propiedades particulares que se expresan mediante uno o
varios atributos que pueden poseer o no un valor:
<etiqueta atributo1=valor atributo2=valor atributo3=valor atributoN=valor>
Estos valores pueden estar expresados (de acuerdo a su función) como texto, indicados entre
comillas, o en formato numérico sin estas, porcentaje, hexadecimal, etc:
atributo=”expresado como texto”
atributo=180px
atributo=70%
Algunas etiquetas en la evolución del HTML han quedado obsoletas, otras sufrido modificaciones,
y otras permanecen invariables desde su creación.
El documento web
La estructura de un documento web está compuesto con los siguientes bloques de etiquetas, dentro
de las cuales irán anidadas las etiquetas detalladas más adelante.
Pag. 4
<!DOCTYPE html>
<html>
<head>
<title> Titulo de la página </title>
</head>
<body>
<p> ¡Hola mundo! </p>
</body>
</html>
Pag. 5
Pag. 6
Doctype debe ser el primer elemento que abra un documento. Esto quiere decir que debería
preceder a <html>. Se trata de una etiqueta que no necesita cierre y cuya función es facilitar
información al servidor web que aloja la página. Aunque esto no es estrictamente necesario, la W3C lo
recomienda para que se siga la "norma".
<!DOCTYPE html>
Las etiquetas <html> ... </html> indican que su contenido debe ser interpretado como un
documento HTML.
Cabecera
Las etiquetas <head> ... </head> definen la cabecera del documento HTML; esta cabecera suele
contener información sobre el documento que no se muestra directamente al usuario como, por
ejemplo, el título de la ventana del navegador.
Título
Las etiquetas <title> ... </title> definen el texto que mostrará la barra de título del navegador web.
Metas
Las etiquetas <meta/> definen los metadatos sobre el documento web, como descripción, palabras
claves, autor. Son además del navegador reconocibles y útiles para los buscadores y otros servicios
de la web.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8”/>
Indica la codificación de caracteres que contempla eñes y acentos
<meta description=”... ”/>
Descripción de la página o sitio web
Cuerpo de la página
Las etiquetas <body> ... </body> definen el contenido principal o cuerpo del documento. Esta es
la parte del documento HTML que se muestra en el navegador.
Pag. 7
Algunos de los posibles atributos para la etiqueta <body> son:
bgcolor=”#FFFFAA” color de fondo que puede expresarse en hexadecimal o con otra notación
background=” ... ” ruta absoluta o relativa y nombre completo del archivo de imagen de fondo
Los margenes son los espacios existentes entre el borde de la ventana del navegador y el contenido
del documento web, expresado normalmente en pixeles:
leftmargin="10px" margen izquierdo
topmargin="10px"
margen superior
rightmargin="10px" margen derecho
bottommargin="10px"
margen inferior
Comentarios
Los comentarios son líneas de texto contenida entre las etiquetas <!-- y --> que el navegador
ignorará y no serán impresas en la página. Sirven normalmente para hacer aclaraciones o describir
algún elemento útiles para el programador.
<!-Esto es un comentario
en varias lineas
que no serán visibles
en el navegador ...
-->
Salto de línea
La etiqueta <br/>
define un salto de línea
Párrafos
Las etiquetas <p> ... </p> definen un párrafo.
Línea horizontal
La etiqueta <hr/> incrusta en el documento una línea horizontal. Los posibles atributos son:
size=3
width=50%
define el grosor de la línea
define el ancho de la línea en izquierda y derecha
Pag. 8
align=center define la alineación, left, right o center
Textos
Texto preformateado
Las etiquetas <h> ... </h> definen el tamaño del texto contenido determinado por el numero que
sigue a “h”.
<h1> Texto muy grande</h1>
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
Formato de texto personalizado
<font face=”Arial”> ... </font>
El valor del atributo face permite establecer el tipo la fuente, ya sea Arial, San sherif, Times, etc.
<i> ... </i>
texto en cursiva
<u> ... </u>
texto subrayado
<b> ... </b>
texto en negrita
<strong> ... </strong>
texto en negrita
<center> ... </center>
texto centrado
Pag. 9
Imágenes
La etiqueta <img /> permite incrusta una imagen en el documento web
Algunos de los posibles atributos para la etiqueta <img /> son:
src=” ...”
ruta absoluta o relativa y nombre completo del archivo de imagen
width=valor define de las dimensiones el ancho de la imagen
height=valor
define de las dimensiones el alto de la imagen
alt=” ...”
texto emergente al pasar el puntero del mouse por encima de la imagen
border=valor define el ancho del borde de la imagen
align=valor
define la alineación de la imagen, los valores posibles son: left, right, top, bottom,
middle. Si hay un texto a continuación de la imagen este fluirá por la derecha o izquierda
vspace=valor y hspace=valor
define el espacio entre el borde de la imagen y el elemento proximo
a el.
<img
src=”/imagenes/flor.png” width=120 height=180 alt=”descripción de la imagen” />
Listas
No ordenadas
Las etiquetas <ul> ... </ul> definen listas no ordenadas, y las etiquetas <li> ... </li> contenidas en
las anteriores, los elementos de la lista:
<ul>
<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
El atributo type determina la viñeta de los elementos de la lista: circular, cuadrada, circular rellena.
Ordenadas
Pag. 10
Las etiquetas <ol> ... </ol> definen listas ordenadas:
<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. </li>
<li> ... y así sucesivamente. </li>
</ol>
El atributo value determina el valor desde el que se numera la lista.
Enlaces
Las etiquetas <a> ... </a> definen un enlace o hipervínculo que permitirá acceder a otra página o
recurso dependiendo de la función que cumpla:
Los posibles atributos para <a> ... </a> son:
href=”...”
el valor de este atributo define la ruta relativa o absoluta del documento al que se
desea acceder
target=” ... ” el valor de este atributo define el modo en que se lanzará el recurso solicitado, si el
documento se abrirá en la misma ventana, en una ventana diferente, o en un marco determinado.
Estos son:
_blank
_parent
_self
_top
Anclas
Las anclas son una variante que permiten establecer un enlace que tiene como destino una región
especifica de un documento web.
En el documento de destino se indica una etiqueta <a> con el atributo name en la región donde se
establecerá el foco del enlace, cuyo valor es el nombre con el que se identifica el ancla.
<a name="ancla">
En el origen del enlace se indica una etiqueta <a> con el atributo href indicando la ruta relativa o
absoluta, el nombre del archivo y el nombre del ancla precedida por el símbolo numeral #
Pag. 11
<a href="ruta/archivo.html#ancla"> Enlace para acceder al ancla </a>
Tablas
Las tablas son elementos que permiten organizar la información, típicamente en filas y columnas.
Una tabla se define entre las etiquetas <table> ... </table>
Una celda está comunmente dada por la intersección de una columna (<td> TableData) y una fila
(<tr> TableRow).
Todas las filas tienen el mismo número de celdas en una tabla. Podemos hacer que una celda de
una fila ocupe el espacio de varias celdas consecutivas, o que una celda esté en varias filas
adyacentes.
<table border="1">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
<td>Celda 3</td>
</tr>
<tr>
<td>Celda 4</td>
<td>Celda 5</td>
<td>Celda 6</td>
</tr>
<tr>
<td>Celda 7</td>
<td>Celda 8</td>
<td>Celda 9</td>
</tr>
</table>
1a fila
2a fila
3a fila
Celdas combinadas, es la conversión de una celda de mayor tamaño en un conjunto de celdas
adyacentes que se muestra en varias columnas o filas.
Los atributos colspan y rowspan permiten combinar o fusionar las celdas adyacente por fila o
columna. De modo que colspan=3 y rowspan=1 combinará tres celdas en una fila.
<table border="1">
<tr>
<td colspan="3" rowspan="1">Celda 1</td>
</tr>
<tr>
<td>Celda 2</td>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
Pag. 12
<tr>
<td>Celda 5</td>
<td>Celda 6</td>
<td>Celda 7</td>
</tr>
</table>
Una celda combinada se puede dividir de nuevo en celdas independientes, pero no se puede
dividir una sola celda que no se haya combinado. Al igual que otras etiquetas pueden presentar
parámetros opcionales cuyo valor dará el resultado que se desee. Por ejemplo el atributo border
con valor igual o mayor a 1 (border=1), será posible visualizar en el navegador los bordes
interiores y exteriores de la tabla. Para una celda el atributo bgcolor igual a RGB(255,0,0) dará
como resultado el color rojo de fondo de la celda.
Capas
Las etiquetas <div> ... </div>
definen una capa contenedora que trabaja como contenedor de
bloque, en este caso se crea un salto de línea anterior y posterior a su contenido.
Las etiquetas <span> ... </span> definen una capa contenedora que trabaja sólo como
contenedor de línea, se puede alinear entre dos palabras de un párrafo por ejemplo.
Las capas en el diseño web son objetos utilizados como contenedores que pueden ubicarse en
cualquier parte de una página web. Estas pueden ser contenedores de imágenes, textos, tablas y
otros elementos, incluso contener otras capas, lo que se conoce como capas anidadas. Pueden
ser utilizadas para superponer unos elementos sobre otros, cosa que no es posible solamente
con el uso de tablas.
Las capas poseen propiedades que mediante javascript podemos alterar de forma dinámica, así
como el comportamiento frente a un evento del usuario en el navegador, como puede ser la
visibilidad, ocultando o mostrando su contenido.
El atributo style
Otra forma de aplicar formato a un texto es mediante el atributo style y puede asignarse sobre
varias etiquetas como <p> , <div> , <body> , <a> , etc,
Al atributo style se le asigna como valor uno o varios selectores separados por puntos-comas con
sus respectivos valores separados por puntos dobles.
atributo = "selector1 : valor; selector2 : valor; selector3 : valor; selectorN : valor"
Propiedad
align
id
Posibles valores
Descripción
left, right, center
alineación izquierda, centrada, derecha, justificada
nombre
es un nombre identificador único que las identifica
Pag. 13
position
absolute, static,
fixed, relative
left
10px
top
10px
width
height
200px , 100%
100px , 100%
z-index
1,2,3,4
background-color
blue, red, green,
#ffff00.
background-image
url(./ruta/foto.png)
opacity
filter
univocamente para distinguirlas entre sí
Define la posición con respecto a los demás
elementos
distancia en pixeles entre el borde izquierdo y el
elemento
distancia en pixeles entre el borde superior y el
elemento
ancho en pixeles o porcentaje
alto de la capa en pixeles o porcentaje
un número que indica el orden de los elementos
superpuestas por encima o debajo unas de otras
establece el color de fondo
establece una imagen como fondo y su
corrspondiente ruta
establece una transparencia del 50% con el valor
0.5
de 0.5
establece para IExplorer la compativilidad con este
alpha(opacity=50)
y otros navegadores.
border-top-width
border-right-width
2px
Es posible establecer el ancho de los bordes
superior (top), inferior (bottom), izquierdo (left) y
derecho (right)
Red, #ff0000
color del texto, cuyo valor puede expresarse
también en hexadecimal u otra notación
5px
espacio existente entre el borde de la etiqueta y su
contenido
10px
espacio existente entre el borde de la etiqueta y el
contenido externo
border-color
Green, #00ff00
color del borde de la etiqueta
border-width
1px
grosor del borde de la etiqueta
border-style
Solid, dotted,
double, groove,
ridge
estilo del borde de la etiqueta
border-bottom-width
border-left-width
color
padding
margin
Pag. 14
Incrustar video, audio, PDFs, Java applets y paginas web
La etiqueta <object> define no solo otra pagina web incrustada dentro de un documento html,
sino tambien otros objetos como video, audio, PDFs, Flash, etc.
<object width="400" height="400" data="menu.html"></object>
data . Determina la direccion del recurso a incrustar.
width y height. Determina el ancho y alto del marco, en pixeles o porcentaje.
type . Determina el tipo de documento a incrustar, type=”text/html” para incrustar una paǵina
web
Formularios
Los formularios son aplicaciones que se utilizan normalmente para obtener información ingresada
o seleccionada por el usuario para luego ser procesada y/o almacenada, permitiendo una mayor
interactividad con este. Los formularios poseen un front-end y un back-end, mientras en el primero
mediante el HTML se puede establecer la interfaz para facilitar al usuario la entrada de datos, el
segundo mediante lenguajes como PHP, ASP u otros permite procesar dichos datos, ya que solo
con HTML no es posible hacerlo.
La etiqueta <form> ... </form> define un formulario. Los posibles atributos son:
action=” ... ” El valor para el atributo action indica la ruta relativa o absoluta al documento
receptor, o sea el archivo que va a procesar la información una vez enviada desde el formulario.
method=valor El modo de envío expresa cómo se envía la información del formulario al
documento destino. Hay dos modos:

“GET”: la información se envía en la URL. Por ejemplo
“procesar.php?login=murdk&pass=1234”

“POST”: la información se envía oculta. Aconsejable este modo para enviar información
confidencial.
<form method=”modo de envío” action=”página receptora”>
controles del formulario:
Cajas de texto...
Cajas para contraseñas...
Memos...
Pag. 15
Casillas de verificación...
Listas desplegables...
</form>
Ejemplo:
<form action=”procesar.php” method=POST></form>
El atributo enctype="multipart/form-data" permite al usuario subir archivos al servidor una vez
seleccionado localmente.
<form enctype=”multipart/form-data” action=”página receptora” method=”modo de envío”>
<input name=”MAX_FILE_SIZE” value=”30000” type=”hidden”>
Enviar este archivo:
<input name=”userfile” type=”file”>
<input value=”Send File” type=”submit”>
</form>
Controles
Los controles contenidos en los formularios son los elementos a través de los cuales es posible
capturar la información ingresada o seleccionada por el usuario.
La etiqueta <input/> define un control que permite diversas formas de obtener la información.
El atributo name, es el nombre con el cual se identifican y distinguen dentro y fuera del formulario
cuando el archivo encargado de procesar la información recibir sus datos.
El atributo type indica qué tipo de control estamos utilizando y como vayamos a obtener la
información:
type=”text”
type=”password”
type=”file”
type=”hidden”
type=”radio”
type=”checkbox”
type=”submit”
type=”reset”
El atributo size especifica el ancho de caracteres aceptados.
Pag. 16
El atributo max indica el cantidad máxima de caracteres.
El atributo value, es opcional e indica un valor por defecto.
<input type=”tipo del control” name=”nombre” value=”valor por defecto” />
Con la versión 5 de HTML placeholder sustituye a value
Caja De Texto
Caja de texto para introducir texto en una línea:
Texto simple
Ej:
<input type=”text” name=”email” />
Texto de contraseñas
Permite introducir una línea de texto oculto detrás de puntos.
Ej:
<input type=”password” name=”pass” />
Pag. 17
Área De Texto
La etiqueta <textarea> permite ingresar texto en varias líneas.
Ej:
<textarea cols="45" rows="15" name="comentarios">
Ingresa aquí tus comentarios ...
</textarea>
Los atributos cols y rows corresponden al ancho y alto del área del control respectivamente. El
atributo maxlength puede restringir el máximo numero de caracteres en el área de texto
Selección de archivo local
El atributo type con valor “file” en la etiqueta <input/>, y el atributo enctype="multipart/formdata" en la etiqueta <form></form> permite seleccionar localmente archivos y enviarlos al
servidor.
<input type="file" name="fichero"/>
Botón Radial
El botón radial que permite seleccionar sólo una opción de una agrupación de opciones.
Ej:
<input type="radio" name="sexo" value=“male“ checked="checked">
Pag. 18
Es posible establecer mediante checked la selección inicial de uno de los elementos. Estos se
agrupan por el mismo valor en el atributo name
Casilla De Verificación
Casilla de verificación que permite seleccionar una o varias opciones de una agrupación de
opciones.
Ej:
<input type=”checkbox” name=”recordar” />
Es posible establecer mediante checked="checked" la selección inicial por defecto de uno o varios
elementos.
Campos Ocultos
Permiten guardar valores sin que se muestren por pantalla, es decir no son visibles al usuario en el
navegador.
Ej:
<input type="hidden" name="testcookie" value="1" />
Listas Desplegables
Las listas desplegables se definen mediante la etiqueta <select> ... </select>. Pueden tener un
nombre (name). Los items se definen con la etiqueta <option> ... </option>.
Pag. 19
Existen dos tipos, de selección simple y selección múltiple de acuerdo a la cantidad de elementos
que pueden seleccionarse.
Selección Simple
La lista permite seleccionar solo una de las opciones
<select name=”lista”>
<option value=”1”>Opción 1</option>
<option value=”2” selected>Opción 2</option>
<option value=”3”>Opción 3</option>
</select>
La información enviada será el valor almacenado en el atributo value de la opción seleccionada.
La opción selected es usado para determinar la selección inicial por defecto de uno de los
elementos.
La etiqueta <select> ... </select> puede mediante el valor del atributo size indica el número de
opciones visibles a la vez.
La etiqueta <optgroup> ... </optgrou> permite agrupar los items de la lista en subcategorías
encabezados por el valor indicado en el atributo label.
<select>
<optgroup label="Lenguajes del lado servidor">
<option>PHP</option>
<option>ASP</option>
</optgroup>
<optgroup label="Lenguajes del lado cliente">
<option>JavaScript</option>
<option>VBScript</option>
</optgroup>
Pag. 20
</select>
Selección Múltiple
La lista permite seleccionar una o varias opciones.
Para determinar la selección múltiple se indica la opción MULTIPLE en la etiqueta <select>.
<select multiple="multiple" size="3" name="idiomas[]">
<option value="ingles" selected>inglés
<option value="frances">francés
<option value="aleman">alemán
<option value="portugues">portugués
</select>
La selección múltiple se efectúa pulsando la tecla CONTROL a la vez que el puntero del mouse.
Rotulo de campos
La etiqueta <label> ... </label> permite asociar un rotulo a un control de entrada. El atributo para
esta etiqueta for especifica el elemento al que está asociado el rótulo
Agrupar campos
La etiquetas <fieldset> ... </fielset> permiten agrupar ciertos campos dibujando un borde
alrededor de dichos elementos. Los atributos para esta etiqueta son name, form, y disabled
La etiqueta <legend> ... </legend> contenida en <fieldset> permite mostrar el texto
correspondiente al marco
Botón De Envío
El valor submit en el atributo type permite enviar los datos del formulario al servidor, el atributo
value permite especificar el texto impreso en el botón.
Pag. 21
Ej1:
<input type=”submit” name=”envio” value=”Enviar” />
Ej2:
<button name=”envio”>Enviar</button>
Atencion: Diferencias entre:
<input type="submit" name="1" value="enviar">
y
<input type="Button" name="2" value="enviar">
El type="submit" envía toda la información de los controles existentes en el form a la página o url
que se menciona en el atributo action, mientras que type="button" solo sirve para ejecutar un
evento (por ejemplo realizar una accion a traves de javascript) antes de que sean enviados los
datos.
Botón De Restablecer
Permite restablecer el contenido de los controles, limpiarlos o poner sus valores por defecto.
Ej:
<input type="reset" name="borrado" value="Restablecer" />
Eventos
Una acción puede desencadenar varios eventos y el orden en ocurren puede ser muy importante.
Los eventos normalmente se combinan con el uso de Javascript y se indican como atributo en las
etiquetas que desean ser ser afectadas.
Eventos que ocurren desde el mouse






onclick
ondblclick
onmousedown
onmouseup
onmouseover
onmousemove
Pag. 22
 onmouseout
Eventos que ocurren desde el teclado
 onkeypress
 onkeydown
 onkeyup
Otros eventos
 onload
 onchange
 onblur
 onfocus
 onsubmit
 onselect
 onreset
 onunload
<button onclick="mensaje()"> Enviar </button>
En el ejemplo se observa el atributo onclick que tiene como valor mensaje(), una función existente
en Javascript que será llamada y generará una respuesta a la acción del click del mouse.
Existen otros eventos de atributo extendidos
HTML5
HTML5 es una extensión evolucionada del tradicional HTML que trae varias mejoras pero soporta
algunas características de las versiones anteriores.
 Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos
multimedia.
 Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, Menu y Command.
 Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime,color,
url,tel, search, etc ) y facilidades para validar el contenido sin Javascript.
 Drag & Drop. Nueva funcionalidad para arrastrar objetos como imágenes.
 Almacenamiento local
 Geolocalización
Las nuevas etiquetas que contempla HTML5 dentro de la etiqueta BODY
Pag. 23
Nuevas tipos de entrada para formularios
Formato direccion de Email
La etiqueta input de tipo email permite validar en un formulario el formato de dirección de e-mail
sin necesidad de utilizar Javascript
<input type=”email” name=”email”/>
Selector de color
La etiqueta input de tipo color permite seleccionar un color de la paleta de colores.
<input type=”color” name=”favcolor”/>
Formato Fecha
La etiqueta input de tipo date, month, week y time permiten validar el formato de fecha y hora.
<input type=”date” name=”bday”/>
<input type=”month” name=”bmonth”/>
<input type=”week” name=”bweek”/>
<input type=”time” name=”btime”/>
Pag. 24
Selector de Rango
La etiqueta input de tipo range permite su uso como un slider, number sin el.
<input type=”range” name=”points” min=”1” max=”10” step="9.09090909" value="509.090909"/>
<input type=”number” name=”points” min=”1” max=”10”/>
Formato Teléfono
La etiqueta input de tipo tel permite validar un número telefónico.
<input type=”tel” name=”usrtel”/>
Formato URL
La etiqueta input de tipo url permite validar una dirección web.
<input type=”url” name=”site” list=”url_list”/>
El atributo pattern (expresiones regulares)
Las expresiones regulares permiten definir patrones de coincidencia y aplicarlas a cadenas de texto
para saber si la cadena (o parte de ella) cumple el patrón e incluso realizar transformaciones de la
cadena.
<input type=”email” pattern=” ... ” />
pattern=” \w ”
Admite los caracteres: A-Z, a-z, 0-9, _
pattern=” \d ”
Admite números con decimales, 14.4
pattern=” [a-f] ”
Admite a, b, c, d, e, f, limita un rango
pattern=” {6,} ”
Admite 6 o mas caracteres
Pag. 25
pattern=” (Mujer|Hombre) ”
Admite solo las palabras indicadas
pattern=” [^A-Z] ”
Rechaza todas la letras mayusculas.
El atributo required
<input type=”text” name=”name” required />
File. Seleccion de archivos
La etiqueta input de tipo file permite seleccionar un archivo del disco.
<label>
Selecciona un archivo:
<input type=”file” multiple name=”att”/>
</label>
Formato Audio
Permite reproducir audio
<audio id="audioTestElem" autobuffer controls >
<source src="test.m4a">
<source src="test.ogg" type="audio/ogg; codecs=vorbis">
<source src="url">
no audio for you
</audio>
Datalist
La etiqueta permite especificar una lista de opciones predefinidas con la característica de
autocompletado.
<input list="browsers" name="browser"/>
<datalist id="browsers">
<option value="IExplorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
Pag. 26
</datalist>
Canvas
Su significado es lienzo en inglés. Es un elemento HTML incorporado en HTML5 que permite la
generación de gráficos dinámicamente por medio del scripting. Permite generar gráficos estáticos
y animaciones.
<canvas id="tutorial" width="150" height="150"></canvas>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset=”utf-8”/>
<meta description=””/>
<title> </title>
</head>
<body>
<header>
<h1> mi titulo </h1>
<figure>
logo
<figcaption>
titulo de logo
</figcaption>
</figure>
</header>
<nav>
menu
</nav>
<section>
<hgroup>
<h1> encabezado </h1>
<h2> sub encabezado</h2>
</hgroup>
<article>
articulo de contenido
<section>
otra seccion dentro del articulo
</section>
</article>
</section>
<footer>
pie de pagina
</footer>
</body>
</html>
Pag. 27