Programación básica de html5

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>

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.

HTML 5
<!DOCTYPE html>
<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.

HTML 5
<!DOCTYPE html>
<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.

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.

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.

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>
<h1>Título TRES</h1><a name="titulotres"></a>

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>

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.

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.

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

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>

HTML 5
1. <form>
Dato1: <input type="text" name="name1">
<fieldset disabled>
</fieldset>
<input type="submit" value="enviar" disabled>

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

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.

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

HTML 5
INSERTAR VIDEO EN HTML5
<video src="videotest.ogv"></video>
<video
src="http://v2v.cc/~j/theora_testsuite/320x240.ogg"></video>

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>

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
controls></video>

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)
autoplay loop controls></video>

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>

HTML 5
A U D I O
<audio src="Audio.mp3" preload="auto" controls></audio>

Programación básica de html5

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Programación básica de html5

Similar a Programación básica de html5 (20)

Último

Último (20)

Programación básica de html5