1. Programación en Internet
HTML 5
La version de HTML5 obliga a definir el lenguaje o
idioma utilizados en los contenidos, quedando de la
siguiente forma:
<!DOCTYPE html>
<html lang=”es”>
<head>
</head>
<body>
</body>
</html>
2. Programación en Internet
HTML 5
La etiqueta meta description, será la forma en que
los motores de búsqueda tomarán en cuenta a la
página. Si el proyecto incluye mas de una página
(.html) se recomienda que cada archivo.html tenga
un description diferente, que identifique solo el
contenido de esa página en específico.
3. Programación en Internet
HTML 5
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta name="Description" content="descripción de la
página">
</head>
<body>
</body>
</html>
Se recomienda que la descripción no tenga mas de 150 caracteres ni
mas de 30 palabras.
4. Programación en Internet
HTML 5
<!DOCTYPE html>
<html lang=”es”>
<head>
<meta charset="utf-8" />
</head>
Se recomienda colocar esta etiqueta, meta charset, para indicarle al
navegador que respete los acentos, las eñes y los tildes de la página. En
el caso de nuestro idioma, se recomienda no cambiarle el valor del
ejemplo. Así como también que sea la primera linea después del HEAD.
5. Programación en Internet
HTML 5
Atributo target en la etiqueta <a href=” “ target=””>
target = “_top” y target=”_parent” Solo tienen efecto si se usan
marcos o frames.
target = “_self” la página de destino a la que apunta el vínculo se
mostrará en la misma ventana del navegador del visitante.
target=”_blank” Con esta opción la página enlazada se abrirá en una
ventana nueva del navegador.
6. Programación en Internet
HTML 5
Los anclajes o enlaces tipo ancla, se usan cuando el usuario pulsa clic sobre un
enlace, en el cual la ventana del navegador corra hacia esa parte concreta de la misma
página o bien, pase a otra página distinta, pero no a su comienzo, sino a la parte
media o a la parte que tú desees de esa otra página.
7. Programación en Internet
HTML 5
<body>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
(estas lineas pueden ir al final o al principio de la página)
<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto. </p>
<h1>Título DOS</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto. </p>
<h1>Título TRES</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto. </p>
8. Programación en Internet
HTML 5
Nuevas etiquetas de HTML 5
<header></header>
<hgroup></hgroup>
<nav></nav>
<article></article>
<section></section>
<aside></aside>
<figure></figure>
<footer></footer>
<address></address>
9. Programación en Internet
HTML 5
<body>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
(estas lineas pueden ir al final o al principio de la página)
<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto. </p>
<h1>Título DOS</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto. </p>
<h1>Título TRES</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto. </p>
10. Programación en Internet
HTML 5
Etiquetas:
<div>
Se usa para definir bloques sin ningún tipo de
significado, normalmente bloques que se usan para
maquetar correctamente la página o para agrupar
elementos en principio sin querer dar un significado
específico.
11. Programación en Internet
HTML 5Etiquetas:
<article>
Representa un contenido específico de la web. Puede
representar un artículo, de opinión, un entrada en un
blog, un comentario en un foro, una noticia, una
descarga, o simplemente un contenido estático de
una web como el típico quienes somos o a qué nos
dedicamos.
12. Programación en Internet
HTML 5Etiquetas:
<section>
En principio se usa para representar un bloque de
nuestra página que tiene valor semántico, es decir,
que aporta un significado a la página
13. Programación en Internet
HTML 5Etiquetas:
<section>
En principio se usa para representar un bloque de
nuestra página que tiene valor semántico, es decir,
que aporta un significado a la página
14. Programación en Internet
HTML 5
El atributo disabled se utiliza para desahbilitar de forma
temporal un campo o conjunto de campos o un boton o
conjunto de botones.
<fieldset disabled>
Nombre <input name=”nombre1”>
</fieldset>
Fecha <input name=”fecha” disabled>
16. Programa|ción en Internet
HTML 5
3. El atributo placeholder permite tener un texto por
defecto en cada una de las cajas de texto, las cuales al ser
seleccionadas se borra automáticamente (esto antes se podía
hacer pero usando javascript y muchas más líneas de código).
<input type="text" id="ejemplo" name="ejemplo"
placeholder="bla bla bla">
17. Programación en Internet
HTML 5
4. La etiqueta de tipo email hace una verificación
automática del formato correcto de correo
electrónico. Antes podía hacerse con javascript
usando varias líneas de código, con HTML5 es solo
agregar el type=”email” y ahorras código y tiempo.
18. Programación en Internet
HTML 5
1.El atributo “required” permite hacer que el campo sea
obligatorio antes de activar el evento submit en el formulario.
Al igual que los dos puntos anteriores, esto antes era posible
con javascript, pero HTML permite hacerlo solo aplicando la
propiedad
<input type="text" id="nombre-de-usuario"
name="usuario" required> .
19. Programación en Internet
HTML 5
INSERTAR VIDEO EN HTML5
<video src="videotest.ogv"></video>
<video
src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"></video>
20. Programación en Internet
HTML 5
MOSTRAR POSTER EN VIDEO
<video src="videotest.ogv" poster="videotest.jpg"></video>
MUESTRA LOS CONTROLES NATIVOS DEL NAVEGADOR SOBRE EL
VIDEO (BOTON PLAY, PAUSE, TIMELINE, ETC) (CONTROLS)
<video src="videotest.ogv" poster="videotest.jpg" controls></video>
21. Programación en Internet
HTML 5
PERMITE MODIFICAR EL ANCHO Y ALTO DEL VIDEO ORIGINAL
<video src="videotest.ogv" poster="videotest.jpg" width="400"
height="400" controls></video>
SI SOLO SE MODIFICA UNO DE LOS VALORES (WIDTH o HEIGTH), EL
OTRO SE CALCULA AUTOMÁTICAMENTE
<video src="videotest.ogv" poster="videotest.jpg" width="500"
controls></video>
22. Programación en Internet
HTML 5
REPRODUCE EL VIDEO UNA Y OTRA VEZ EN UN BUCLE INFINITO (LOOP)
<video src="videotest.ogv" poster="videotest.jpg" width="500" loop
controls></video>
REPRODUCE EL VIDEO AUTOMATICAMENTE AL CARGARSE LA PÁGINA
(AUTOPLAY)
<video src="videotest.ogv" poster="videotest.jpg" width="500"
autoplay loop controls></video>
23. Programación en Internet
HTML 5
REPRODUCE EL VIDEO UNA Y OTRA VEZ EN UN BUCLE INFINITO (LOOP)
<video src="videotest.ogv" poster="videotest.jpg" width="500" loop
controls></video>
REPRODUCE EL VIDEO AUTOMATICAMENTE AL CARGARSE LA PÁGINA
(AUTOPLAY)
<video src="videotest.ogv" poster="videotest.jpg" width="500"
autoplay loop controls></video>
24. Programación en Internet
HTML 5
CARGAR EL VIDEO AUTOMÁTICAMENTE PERO SIN REPRODUCIR
(PRELOAD)
<video src="videotest.ogv" poster="videotest.jpg" width="500" preload
loop controls></video>
INSERTAR MAS DE UN ARCHIVO SOURCE
<video poster="videotest.jpg" width="500" preload loop controls>
<source src="videotest.ogv" type="video/ogv">
<source src="videotest.mp4" type="video/mp4">
</video>