Programación básica de html5

Programación en Internet

HTML 5La 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 5La 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><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.


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.


HTML 5Atributo 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 5Los 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> <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>


HTML 5Nuevas etiquetas de HTML 5

<header></header><hgroup></hgroup><nav></nav><article></article><section></section><aside></aside><figure></figure><footer></footer><address></address>


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>


HTML 5Etiquetas:<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 5El 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 51. <form> Dato1: <input type="text" name="name1"> Dato2: <input type="text" name="name2"> <fieldset disabled> Dato3: <input type="text" name="name3"> Dato4: <input type="text" name="name1"> Dato5: <input type="text" name="name2"> </fieldset> Dato6: <input type="text" name="name3"> <input type="submit" value="enviar" disabled></form>

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 5PERMITE 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>


HTML 5REPRODUCE 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>


HTML 5CARGAR 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 5A U D I O

<audio src="Audio.mp3" preload="auto" controls></audio>

Programación básica de html5

Technology

Transcript of Programación básica de html5