TDAweb HTML5 Ejercicios 3

/////////////////////////////////////////////////////////////
// Tipos input de Formularios


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nuevos tipos de input de HTML5</title>
</head>
<body>
<h1>Nuevos tipos de input de HTML5</h1>
<p>Este formulario demuestra los nuevos tipos de elementos input de
HTML5
y los atributos placeholder, required y autofocus.
</p>
<form method="post" action="http://www.google.com">
<p>
<label>Color:
<input type="color" autofocus />
(Código hexadecimal como #ADD8E6)
</label>
</p>
<p>
<label>Fecha:
<input type="date" />
(aaaa-mm-dd)
</label>
</p>
<p>
<label>Hora y fecha:
<input type="datetime" />
(aaaa-mm-ddThh:mm+ff:gg, como 27-01-2016T03:15)
</label>
</p>
<p>
<label>Hora y fecha-local:
<input type="datetime-local" />
(aaaa-nm-ddThh:mm, como 2012-01-27T03:15 )
</label>
</p>
<p>
<label>Email:
<input type="email" placeholder="nombre@dominio.com"
required /> (nombre@dominio.com)
</label>
</p>
<p>
<label>Mes:
<input type="month" /> (aaaa-mm)
</label >
</p>
<p>
<label>Número:
<input type="nunber"
min="0"
max="7"
step="1"
value="4" />
</label> (Escriba un número entre 0 y 7)
</p>
<p>
<1abel>Rango:
0 <input type="range"
min="0"
max="20"
value="10" /> 20
</labe1>
</p>
<p>
<label>Búsqueda:
<input type = "search" placeholder="consulta de
búsqueda" />
</labe1> (Escriba aquí su consulta de
búsqueda.)
</p>
<p>
<label>Tel:
<input type="tel" placeholder= "(###) ###-####"
pattern="\(\d{3}\)+\d{3)-\d{4)" required />
(###) ###-####
</label>
</p>
<p>
<label>Hora:
<input type="time" /> (hh:mm)
</label>
</p>
<p>
<label>URL:
<input type="url"
placeholder = "http://www.nombredominio.com" />
(http://www.nombredominio.com)
</labe1>
</p>
<p>
<label>Semana:
<inputtype="week" />
(aaaa-Wnn, tal como 2012-W01)
</labe1>
</p>
<p>
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar" />
</p>
</fom>
</body>
</html>
/////////////////////////////////////////////////////////////
// Campos de Autocompletar

<!DOCTYPE html>
<html>
<head>
<title> El nuevo atributo autocomplete y el elemento datalist de
HTML5</title>
</head>
<body>
<h1>El autocomplete y datalist </h1>
<p>Este formulario demuestra el nuevo atributo autocomplete de HTML
y el elemento datalist.
</p>

<form method="post" autocomplete="on">
<p><label>Primer nombre:
<input type="text" id="primerNombre"
placeholder="Primer nombre"/> (Primer nombre)
</label></p>
<p><label>Apellido:
<input type="text" id="apellido"
placeholder="Apellido" /> (Apellido)
</label></p>
<p><label>Email:
<input type="email" id="email"
placeholder="nombre@dominio.com" /> (nombre@dominio.com)
</label></p>
<p><label for="listaTexto">Mes de nacimiento:
<input type="text" id="listaTexto"
placeholder="Seleccione un mes" 1ist="meses" />
<datalist id="meses">
<option value="Enero">
<option value="Febrero">
<option value="Marzo">
<option value="Abril">
<option value="Mayo">
<option value="Junio">
<option value="Julio">
<option value="Agosto">
<option value="Septiembre">
<option value="Octubre">
<option value="Noviembre">
<option value="Diciembre">
</datal1st>
</label></p>
<p><input type="submit" value="Enviar" />
<input type="reset" value="Borrar" /></p>
</form>
</body>
</html>
/////////////////////////////////////////////////////////////
// Nuevos elementos de HTML5: section

<!DOCTYPE htmil>
<html>
<head>
<title>Nuevos elementos section de HTML5</title>
</head>
<body>
<header> 
<img src="logodeitel.png" alt="Logo de Deitel" />
<h1>Bienvenido a Deitel Buzz Online<h1>

<time>2016-01-01</time>
</header>
<section id="1"> 
<nav> 
<h2> Publicaciones recientes</h2>
<ul>
<li><a href="http://www.deitel.com/books/iw3htp5">
Internet & World Wide Web How to Program,
5/e</a></li>
<li><a href="http://www.deitel.com/books/androidfp/">
Android for Programmers: An App-Driven
Approach</a>
</li>
<li><a href="http://www.deitel.com/books/iphonefp">
iPhone for Programmers: An App-Driven
Approach</a></li>
<li><a href="http://www.deitel.com/books/jhtp9/">
Java How to Program, 9/e</a></li>
<li><a href="http://www.deitel.com/books/cpphtp8/">
C++ How to Program, 8/e</a></li>
<li>
<a
href="http://www.deitel.com/books/vcsharp20l0htp">
Visual C# 2010 How to Program,
4/e</a></li>
<li><a href="http://www.deitel.com/books/vb2010htp">
Visual Basic 2010 How to Program</a></li>
</ul>
</nav>
</section>
<h2>Libros de la serie Cómo programar</h2>
<h3><em>Java How to Program, 9/e</em></h3>
<figure> 
<img src="jhtp.jpg" alt="Java How to Program. 9/e" />

<figcaption>Cubierta de <em>Java How to Program, 9/e</em>
.</figcaption>
</figure>
<!-� el elemento article representa el contenido de otra fuente
-->
<article>
<header>
<h5>De
<em>
<a
href="http://www.deite1.com/books/jhtp9/">
Java How to program, 9/e: </a>
</em>
</h5>
</header>
<p>Características:
<ul>
<li>Extensa cobertura de los fundamentos:

<mark>dos capítulos sobre
instrucciones de control.</mark></li>
<li>Enfoque en <mark>ejemplos del mundo
real.</mark></li>
<li><mark>Conjunto de ejercicios Hacen la
diferencia.</mark></li>
<li>Introducción desde los primeros
capítulos a las clases,
objetos, métodos y cadenas.</li>
<li>Manejo de excepciones integrado.</li>
<li>Archivos, flujos y serialización de
objetos.</li>
<li>Secciones modulares opcionales sobre el
lenguaje y
características de la biblioteca
de la nueva versión Java SE 7.</li>
<li>Otros temas: Recursividad, búsqueda,
ordenamiento,
colecciones genéricas,
genéricos, estructuras
de datos, applets, multimedia,
multihilos, bases de datos/JDBC™,
desarrollo de
aplicaciones Web, servicios Web y un caso
de estudio
opcional de Diseño Orientado a
Objetos con un ATM.</li>
</ul>


<details>
<summary>Testimonios de la reciente
edición</summary>
<ul>
<li>"Se actualizó para reflejar lo
último
en tecnologías de Java; sus claras
y detalladas explicaciones lo hacen
indispensable. Los ejercicios de
conciencia social
[Hacen la diferencia] son algo
verdaderamente nuevo y refrescante."
<strong>—José Antonio
González Seco, Parlamento de
Andalucía</strong></li>
<li>"Otorga a los nuevos programadores el
beneficio de la
sabiduría derivada de muchos
años de experiencia en
el desarrollo de software."<strong>
—Edward F. Gehringer, North
Carolina
State University</strong></li>
<li>"Introduce las buenas prácticas y
metodologías
de diseño, justo desde el
principio.
Un excelente punto de partida para
desarrollar
aplicaciones Java robustas de alta
calidad."
<strong>—Simon Ritter,
Oracle Corporation</strong></li>
<li>"Un estilo conversacional fácil de
leer.
Los ejemplos de código claros
impulsan a los lectores
a volverse expertos en Java."
<strong>—Patty Kraft, San Diego
State
University</strong></li>
<li>"Un excelente libro de texto con una
infinidad de ejemplos
de diversos dominios de
aplicaciones—
excelente para un curso ordinario de CS1
o CS2."
<strong>—William E. Duncan,
Louisiana
State University</strong></li>
</ul>
</details>
</p>
</article>


<aside>
Los navegadores no aplican formato al elemento aside.
</aside>
<h2>Libros de la serie Deitel Developer</h2>
<h3><em>Android for Programmers: An App-Driven Approach
</em></h3>
Haga clic <a href="http://www.deitel.com/books/androidfp/">
aquí</a> para obtener más información
sobre cómo
pedir este libro.
<h2>Videos LiveLessons</h2>
<h3><em>C# 2010 Fundamentals LiveLessons</em></h3>
Haga clic <a
href="http://www.deitel.com/Books/LiveLessons/">
aquí</a> para obtener más información
sobre nuestros videos
LiveLessons.
</section>
<h2>Resultados de nuestra encuesta en Facebook</h2>
<p>Si usted fuera un novato que deseara aprender Java por primera
vez, ¿preferiría un curso que enseñara Java
en el contexto del desarrollo de aplicaciones Android? Estos son
los resultados
de nuestra encuesta:</p>

0<meter min="0"
max="54"
value="14"></meter>54
<p>De los 54 participantes, 14 (verde) preferirían
aprender Java en el contexto del desarrollo de aplicaciones
Android.</p>
</section>



<footer>


<h6>© 1992-2012 por Deitel & Associ<wbr>ates, Inc.
Todos los derechos reservados.<h6>


<address>
Escriba a <a href="mailto:deitel@deitel.com">
deitel@deitel.com</a>
</address>
</footer>
</body>
</html>
/////////////////////////////////////////////////////////

TDAweb HTML5 Ejercicios 3

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

TDAweb HTML5 Ejercicios 3

Cargado por

Copyright:

Formatos disponibles

/////////////////////////////////////////////////////////////

// Tipos input de Formularios

También podría gustarte