Practica 10 Video

Programación web I
FORMULARIOS
Formularios básicos
Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas:
<form> y <input>. Si se considera el formulario que muestra la siguiente imagen:
SECCIONES DEL <BODY>
Si el body es el contenedor de toda la información visible, se debe clasificar para que en

un futuro el estilo grafico sea más fácil de aplicar.
Estas nuevas secciones son:

 La cabecera de la página que puede llevar el logotipo del negocio, el titulo o el
nombre
 El menú de navegación en el sitio
 La columna de contenido a lado derecho de la pagina
 Pie de página que puede llevar ayudas, contactos, política de privacidad y mas
 Grupo temático en el que puedes construir tus propias secciones y a cada una de
ellas brindarle diferente diseño visual
Todas estas etiquetas se usan en las páginas web, cada una de estas deben ser
visualizadas como cajas, algunas separadas y otras que contengan otras cajas.
Ana Linda Pineda Mendez

Programación web I
Etiqueta <header>
Esta etiqueta contiene la agrupación de código HTML correspondiente a la

cabecera de la web o referencia descriptiva a artículos.
La agrupación de código en esta etiqueta HTML5 puede contener:
 Logotipo o cabecera
 Encabezados h1, h2, h3… o etiqueta hgroup
 Título de la web o artículo
 Texto descriptivo de la web o artículo
 Menú de navegación –> etiqueta nav
 Enlaces de interés (Contactar…) –> etiqueta aside o section
Ejemplo:
<header>
<h1>TITULO DE LA PÁGINA WEB</h1>
<h2>Contenido de la página: .</h2>
<ul>
<li><a href="inicio.html">Inicio</a></li>
<li><a href="unaseccion.html">Una Sección</a></li>
<li><a href="otraseccion.html">Otra Sección</a></li>
</ul>
</header>
Etiqueta <footer>
Contiene la agrupación de código HTML correspondiente al pie de página que
suelen tener habitualmente todas las webs.
El tipo de información en esta etiqueta HTML5 puede ser:
 Información legal
 Contactar
 Privacidad
 Otros enlaces de interés
Ejemplo:
<footer>
<ul>
<li><a href="aviso-legal.html">Aviso legal</a></li>
<li><a href="privacidad.html">Provacidad</a></li>
<li><a href="contactar.html">Contactar</a></li>
</ul>

Programación web I
</footer>
Etiqueta <nav>
Definir el conjunto de código de un menú de navegación. No confundir con las etiquetas section o
menu, nav sólamente contiene enlaces a las diferentes secciones de la web.
ejemplo
<nav>
<a href="/enlace1/">Enlace 1</a>
<a href="/enlace4/">enlace 4</a>
</nav>
Etiqueta <aside>
define una sección de la web donde el contenido no tiene que estar

necesariamente relacionado con el contenido principal de la web.
Generalmente suelen ser barras laterales o sidebars de una web (Plugins sociales,
publicidades…).
Dentro de la etiqueta aside podemos meter la etiqueta section para declarar otras

secciones de la web.
<aside>
<section>
<header><h2>Noticias relacionadas</h2></header>
<article>
<header>
<h1>Noticia 1</h1>
<p>Texto descriptivo 1</p>
</header>
<footer>
<p>Publicado el XXX del XXX de XXX</p>
</footer>
</article>
<article>
<header>
<h1>Noticia 2</h1>
</header>
<footer>

Programación web I

</footer>
</article>
</section>
</aside>
Etiqueta <article>
Esta etiqueta ayuda a definir un contenido específico dentro de una web y que por
si solo tiene sentido.
Un código independiente y con sentido puede ser:
 Mensajes de un foro.
 Comentarios.
 Artículos de periódicos, revistas y blogs.
 Widget y similares.
ejemplo
<aside>
<section>
<header><h2>Noticias relacionadas</h2></header>
<article>
<header>
<h1>Noticia 1</h1>
</header>
<footer>
</footer>
</article>
<article>
<header>
<h1>Noticia 2</h1>
</header>
<footer>
</footer>
</article>
</section>

Programación web I
</aside>
En muchas ocasiones se usan videos para darle más interactividad a la página web.
La etiqueta de video es muy parecida a la de imágenes solo que esta, si tiene etiqueta de
cierre
 Escribe <VIDEO> en <BODY>
 Escribe el ancho del rectángulo que contendrá el video con width
 Escribe la altura del rectángulo que contendrá el video con height
 Después escribe src entre comillas
 Agrega la dirección del video
 Termina la etiqueta con >
 Y cierra la etiqueta con >/VIDEO>
ATRIBUTOS
Esta etiqueta tiene muchos atributos, como:

 Controls: Define si el cuadro de video tendrá los botones de play, pausa, volumen,
barra indicadora, entre otros.
 Autoplay: Da inicio al video automáticamente después de cargar la página web
 Poster: Agrega la imagen de tu elección para ponerla cuando el video aún no se
reproduzca
 Width/Height: Define los lados de pixeles del rectángulo que contendrá el video
 Src: Determina la dirección del video
 Loop: Define si el video se reiniciara cuando acabe
Es de suma importancia elegir un video con una extensión compatible con el navegador
que planeas usar, ya que no todos soportan cualquier formato.
Por ejemplo, los formatos más comunes para HTML son:

 MP4
 WEBM
 OGG
Para evitar problemas de compatibilidad con cualquier navegador crea los tres formatos
en la carpeta del sitio, generalmente en una carpeta dedicada a videos.
 Abre la etiqueta de <VIDEO> con los atributos que desees
 Abre la etiqueta <source> y agrega un atributo src
 Escribe type para indicar la extension
 Repite la etiqueta <source> por cada tipo de formato
 Cierra la etiqueta de </VIDEO>
De esta manera, el navegador usa el video en el formato que le es compatible.

Programación web I
Es muy difícil que un navegador, no sea compatible con ninguno de estos tres formatos
por lo que el video siempre se desplegara.
Agregar videos en tus páginas web, es una gran idea ya que incrementan el número de
visitas a la página por lo llamativos que son, todo depende del tipo de sitio web que estés
construyendo
ejemplo
<video controls autoplay loop with ="512" height = "288">
<source src="introduccionphp.mp4"
type= "video/mp4">
</video>
Realizar una página web, donde incluya dos secciones y agregar dos videos

Practica 10 Video

Cargado por

Información del documento

Título original

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

Practica 10 Video

Cargado por

Copyright:

Formatos disponibles

Programación web I

SECCIONES DEL <BODY>

Si el body es el contenedor de toda la información visible, se debe clasificar para que en

Estas nuevas secciones son:

Ana Linda Pineda Mendez

Esta etiqueta contiene la agrupación de código HTML correspondiente a la

La agrupación de código en esta etiqueta HTML5 puede contener:

El tipo de información en esta etiqueta HTML5 puede ser:

Ana Linda Pineda Mendez

define una sección de la web donde el contenido no tiene que estar

Dentro de la etiqueta aside podemos meter la etiqueta section para declarar otras

Ana Linda Pineda Mendez

<p>Publicado el XXX del XXX de XXX</p>

Un código independiente y con sentido puede ser:

Ana Linda Pineda Mendez

Esta etiqueta tiene muchos atributos, como:

Por ejemplo, los formatos más comunes para HTML son:

De esta manera, el navegador usa el video en el formato que le es compatible.

Ana Linda Pineda Mendez

<video controls autoplay loop with ="512" height = "288">

Ana Linda Pineda Mendez

También podría gustarte