Desarrollo de Aplicaciones

Desarrollo de Aplicaciones en
Internet
GUÍA DE LABORATORIO 1
“HTML5”
Docente: Juan Jose León Suiyon

Tecsup
LABORATORIO
Objetivos:
 Diseñar páginas Web utilizando el lenguaje HTML5.
Equipos, Materiales, Programas y Recursos:
 PC con Sistema Operativo Windows o Linux

 Notepad++ o Sublime Text
Introducción:
En la presente sesión se detalla los fundamentos para el diseño de interfaces Web para móviles.
Seguridad:
 Ubicar maletines y/o mochilas en el gabinete al final de aula de laboratorio.

 No ingresar con líquidos ni comida al aula de laboratorio.
 Al culminar la sesión de laboratorio, apagar correctamente la computadora y el monitor.
Preparación:
Durante el desarrollo de los temas de clase se tendrán ejercicios explicativos en cada uno de los
puntos, ello le dará a la sesión una interacción de la teoría y la parte práctica, ya que en todo el
momento el alumno podrá comprobar en su propia PC, todos los ítems del manual.
Procedimiento y Resultados:
1. Sublime Text
2. Package control (copiar el código de Sublime text3)
3. Ingresar al menú de Sublime Text
a. View – Show consolé
b. Pegar el código, presionar enter
c. Presionar Ctrl + Ship + P
d. Seleccionar Package Control: Install Package
e. Verificar la instalación
i. HTML : 5
Redes y Comunicaciones Pág. 1

Tecsup
HTML 5
Etiquetas estructurales
Los nuevos elementos estructurales están representados por las siguientes etiquetas:
 <header>
 <section>
 <article>
 <aside>
 <footer>
 <nav>
HTML 4 HTML 5
Demostración de la Estructura básica de HTML5

Tecsup
Googlea -> Código de colores HTML

Tecsup
Ejercicio1.html
<!DOCTYPE html>
<html lang="es-419">
<head>
<meta charset="utf-8" />
<style type="text/css">
header{
background-color:#ececec;
text-align:center;
color:#bbb;
}
header h1{
padding: 20px;
margin:0;
}
article{
padding:30px;
border-bottom:1px solid #ebebeb;
}
aside{
float: right;
border-left:1px solid #ebebeb;
background-color: #F7F6F6;
}
</style>
</head>
<body>
<header><h1>Cabecera de la página</h1></header>
<article>Artículo 1</article>
<article>Artículo 2</article>
<aside>
<ul>
<li>Elemento 1</li>

Tecsup
<li>Elemento 2</li>
</ul>
</aside>
<footer>Pie de página</footer>
</body>
</html>

Tecsup
Ejercicio2.html
<!DOCTYPE html>
<html>
<head>
<style>
ul{
padding-left:0;
}
li{
list-style: none;
display: inline;
padding-right: 40px;
}
body > header{

background: #333;
}
body > footer{

background: #666;
}
body{
color: #FFF;
}
a{
text-decoration: none;
color: blue
}
article {
display: table-cell;
}
</style>

Tecsup
</head>
<body>
<header>
<h1>Personal Web Page</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</header>
<section style="background: #CCC">

<header><h1>Listado de noticias</h1></header>
<article><h2>Noticia 1</h2><p>Contenido 1, Contenido 1, Contenido
1</p></article>
2</p></article>
3</p></article>
<footer><h6>Las noticias se actualizarán cada 3 minutos</h6></footer>
</section>
<footer>
<h3>Copyright 2015</h3>
</footer>
</body>
</html>

Tecsup

Tecsup
Crear un Archivo estilos.css

Tecsup

Tecsup
¿Por qué el DOCTYPE es importante?

http://www.w3.org/QA/Tips/Doctype
¿Cuáles son las nuevas etiquetas de HTML5?

http://blog.art4software.com/2012/05/html5-10-nuevas-etiquetas/
¿Qué es “xhtml”?
http://www.cristalab.com/tutoriales/tutorial-basico-de-xhtml-c143l/

Tecsup
Resultado:

Tecsup
Etiqueta para audio
Ejercicio3.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<audio controls id="audio1" src="musica.mp3" autoplay></audio>
<div>
<button
onclick="document.getElementById('audio1').play();">Reproducir</button>
<button
onclick="document.getElementById('audio1').pause();">Pausa</button>
<button onclick="document.getElementById('audio1').volume +=
0.1;">Subir Volumen</button>
<button onclick="document.getElementById('audio1').volume -=
0.1;">Bajar Volumen</button>
</div>
</body>
</html>

Tecsup
Etiqueta para video
Ejercicio4.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
video {
width: 400px;
height: 224px;
border: 1px solid black;
}
</style>
</head>
<body>
<video controls poster="html5.png">

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"' />
</video>
</body>
</html>

Tecsup
Etiquetas para Formularios
Desde los orígenes de HTML hemos tenido las siguientes etiquetas:
Ejercicio5.html
<!DOCTYPE html>
<head>
</head>
<body>
<form action="procesar.php" method="post">

<h3>Formulario</h3>
Fecha: <input id="fecha" type="date" name="txtFecha" value="2013-06-18"/>
<br/>
Hora: <input id="hora" type="datetime-local" name="txtHora" />

Tecsup
<br/>
Importe total: <input id="importe" type="number" name="txtImporte" required
autofocus title="Debe ser un valor numérico decimal"/>
<br/>
Correo: <input id="email" type="email" name="txtCorreo" required
placeholder="Ingrese el correo aquí" title="Ejemplo: mail@acme.com"/>
<br/>
WebSite: <input id="website" type="url" name="txtWebsite" required />
<br/>
Teléfono: <input id="phone" type="tel" name="txtTelefono" required/>
<br/>
Dirección: <input type="search" name="txtDireccion"/>
<br/>
Indique la versión de PHP que conoce: <input id="version" type="number"
value="3" min="3" max="5"/>
<br/>
Elija el color: <input type="color" value="color"/>
<br/>
Califique la página (1 al 5): <input type="range" min="0" max="5" step="1" />
<br/>
<button id="botonEnviar" type="submit">Enviar</button>
<p/>
Cualquier duda contactar a <a href="tel:+997391008">997391010</a>
</form>
</body>
</html>

Tecsup
Ejercicio6.html
<!DOCTYPE html>
<head>
</head>
<body>
<form action="procesar.php" method="post" autocomplete="off">

<h3>Formulario</h3>
Distrito: <input type="text" list="distritos" name="txtDistrito" />
<datalist id="distritos">
<option value="Santa Anita"/>
<option value="San Martín"/>
<option value="San Miguel"/>
</datalist>
Elegir varios archivos: <input type="file" multiple name="varios"/>
<br/>
Elegir una imagen: <input type="file" accept="image/*" name="foto"/>
<br/>
DNI: <input type="text" name="dni" pattern="[0-9]{8}" required/> (8 números)
<br/>
Medidor: <meter min="0" max="100" value="80"></meter>
<br/>
<button id="submit" type="submit">Enviar</button>
</form>
</body>
</html>

Tecsup
Ejercicio7.html

</head>
<body>
<h1>RESERVACION DE HABITACION</h1>
<form action="procesar.php" method="post">
<h3>Formulario</h3>
Nombre Completo: <input id="fecha" type="date"
name="txtFecha" value="2013-06-18"/>
<br/>
Fecha de llegada: <input id="hora" type="datetime-local"
name="txtHora" />
<br/>
Numero de personas: <input id="fecha" type="date"
name="txtFecha" value="2013-06-18"/>
<br/>

Tecsup
Tipo de habitacion: <input id="importe" type="number"

name="txtImporte" required autofocus title="Debe ser un valor numérico
decimal"/>
<button id="botonRegistrar" type="submit">Registrar</button>
</form>
</body>
</html>
Conclusiones:
En la presente sesión, se detalló los fundamentos para el diseño de interfaces Web.
-Se analizó cada etiqueta básica que complementan en la estructurad de una

página Web
-Se trabajó en otra capa el CSS para no amontonar todo en la estructura de
HTML5
-Se agregó colores de fondo a cada página.

Desarrollo de Aplicaciones

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Desarrollo de Aplicaciones

Încărcat de

Drepturi de autor:

Formate disponibile

Desarrollo de Aplicaciones en

Docente: Juan Jose León Suiyon

 Diseñar páginas Web utilizando el lenguaje HTML5.

Equipos, Materiales, Programas y Recursos:

 PC con Sistema Operativo Windows o Linux

 Ubicar maletines y/o mochilas en el gabinete al final de aula de laboratorio.

Redes y Comunicaciones Pág. 1

Demostración de la Estructura básica de HTML5

Redes y Comunicaciones Pág. 2

Googlea -> Código de colores HTML

Redes y Comunicaciones Pág. 3

Redes y Comunicaciones Pág. 4

Redes y Comunicaciones Pág. 5

body > header{

body > footer{

Redes y Comunicaciones Pág. 6

<section style="background: #CCC">

Redes y Comunicaciones Pág. 7

Redes y Comunicaciones Pág. 8

Crear un Archivo estilos.css

Redes y Comunicaciones Pág. 9

Redes y Comunicaciones Pág. 10

¿Por qué el DOCTYPE es importante?

¿Cuáles son las nuevas etiquetas de HTML5?

Redes y Comunicaciones Pág. 11

Redes y Comunicaciones Pág. 12

Etiqueta para audio

<audio controls id="audio1" src="musica.mp3" autoplay></audio>

Redes y Comunicaciones Pág. 13

Etiqueta para video

<video controls poster="html5.png">

Redes y Comunicaciones Pág. 14

Etiquetas para Formularios

Desde los orígenes de HTML hemos tenido las siguientes etiquetas:

<form action="procesar.php" method="post">

Redes y Comunicaciones Pág. 15

Redes y Comunicaciones Pág. 16

<form action="procesar.php" method="post" autocomplete="off">

Redes y Comunicaciones Pág. 17

<meta charset="utf-8" />

Redes y Comunicaciones Pág. 18

Tipo de habitacion: <input id="importe" type="number"

En la presente sesión, se detalló los fundamentos para el diseño de interfaces Web.

-Se analizó cada etiqueta básica que complementan en la estructurad de una

Redes y Comunicaciones Pág. 19

S-ar putea să vă placă și