Original article: The Best HTML Examples and HTML5 Examples
HTML proporciona la estructura de los sitios web. Estos son algunos ejemplos en cómo usar la sintaxis HTML para crear sitios web, incluidos algunos ejemplos de las características HTML5 más recientes.
Ejemplo del atributo a href
El atributo <a href> se refiere a un destino provisto por un enlace. La etiqueta a (anchor) está muerta sin el atributo <href>. A veces, en su flujo de trabajo, no desea un enlace en vivo o aún no sabrá el destino del enlace. En este caso, es útil establecer el atributo href a "#" para crear un enlace muerto. El atributo href puede ser utilizar para vincular los archivos locales o archivos en Internet.
Por ejemplo:
<html>
<head>
<title>Ejemplo de atributo Href</title>
</head>
<body>
<h1>Ejemplo de atributo Href</h1>
<p>
<a href="https://www.freecodecamp.org/contribute/">La pagina de de contribucion de freeCodeCamp</a> te muestra como y donde puedes contribuir a la comunidad y al crecimiento de freeCodeCamp.
</p>
</body>
</html>El atributo <a href> es compatible con todos los navegadores.
Más atributos:
hreflang : Especifica el idioma del recurso vinculado.
target : Especifica el contexto en el que se abrirá el recurso vinculado.
title : Define el título de un vínculo, que aparece al usuario como una información sobre herramientas.
Ejemplos:
<a href="#">This is a dead link</a>
<a href="https://www.freecodecamp.org">This is a live link to freeCodeCamp</a>
<a href="https://html.com/attributes/a-href/">more with a href attribute</a>Anclajes en-página
También es posible establecer un ancla en un lugar determinado en la página. Para hacer esto, deberá colocar en primer lugar un tab en la ubicación de la página con la etiqueta y el atributo necesario "name" con cualquier descripción palabra-clave, como esta:
<a name="top"></a>No se requiere ninguna descripción entre etiquetas. Después de eso, puede colocar un enlace que conduzca a esta ancla a cualquier otro lugar en la misma página. Para hacer esto deberías usar la etiqueta con el atributo necesario "href" con un simbolo # (sharp) y la descripción de la palabra-clave ancla, como esto:
<a href="#top">Go to Top</a>Enlaces de imagen
El <a href="#"> también puede ser aplicado a imágenes y otros elementos HTML
Ejemplo
<a href="#">
<img itemprop="image" style="height: 90px;" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
</a>Ejemplo
El a target ejemplo
El atributo <a target> específica dónde abrir el documento vinculado en una etiqueta a (ancla).
Ejemplos:
El atributo target con el valor de “_blank” abre un documento vinculado en una nueva ventana o tab.
<a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>Un atributo target con el valor de “_self” abre el documento vinculado en el mismo marco en el que se hizo clic (este es el valor predeterminado y usualmente no necesita ser especificado).
<a href="https://www.freecodecamp.org/" target="_self">freeCodeCamp</a><a href="https://www.freecodecamp.org/">freeCodeCamp</a>Un atributo target con el valor del “_parent” abre el documento vinculado en el marco principal.
<a href="https://www.freecodecamp.org/" target="_parent">freeCodeCamp</a>A target attribute with the value of “_top” opens the linked document in the full body of the window.
En atributo target con el valor de “_top” abre el documento vinculado en el cuerpo completo de la ventana.
<a href="https://www.freecodecamp.org/" target="_top">freeCodeCamp</a>Un atributo target con el valor de “framename” abre el documento vinculado en un marco con un nombre especificado.
<a href="https://www.freecodecamp.org/" target="framename">freeCodeCamp</a>El atributo body background ejemplo
Si desea agregar una imagen de fondo en lugar de un color, una solución es el atributo <body background>. Especifica una imagen de fondo por un documento HTML.
Sintaxis:
<body background="URL">
Atributo:
background - URL for background image
Ejemplo:
<html>
<body background="https://assets.digitalocean.com/blog/static/hacktoberfest-is-back/hero.png">
</body>
</html>El atributo body-background es depreciado.
El atributo body-background a caido en deshuso en HTML5. La forma correcta de estilizar el tag <body> es con CSS.
Hay diferentes propiedades CSS usadas para poner el fondo de un elemento. Estas pueden ser usadas para colocar el fondo de una página completa.
El atributo body bgcolor ejemplo
El atributo <body bgcolor> asigna el color de fondo por un documento HTML.
Sintaxis:
<body bgcolor="color"> El valor del color puede ser el nombre de un color (como, morado) o un valor hex (like, #af0000).
Para añadir un color de fondo a una página web puedes usar el atributo <body bgcolor="######">. Especifica un color para que se muestre en el documento HTML
Por ejemplo:
<html>
<head>
<title>Body bgcolor Attribute example</title>
</head>
<body bgcolor="#afafaf">
<h1>This webpage has colored background.</h1>
</body>
</html>Puedes cambiar de color reemplanzando ###### con un valor hexadecimal. Para colores simples también puedes usar la palabra, como es "red" o "black".
Todos los principales navegadores admiten el atributo <body bgcolor>.
Nota:
- HTML5 no admite el atributo
<body bgcolor>. Usa CSS para este propósito. ¿Cómo? Usando el siguiente código:<body style="background-color: color">Por supuesto, también puedes hacerlo en un documento separado en lugar del método inline. - No uses el valor RGB en el atributo
<body bgcolor>porquergb()es para CSS solamente, es decir, no funcionará en HTML.
El atributo div align ejemplo
El atributo <div align=""> es usado para alinear el texto en una etiqueta div a left, right, center o justify.
Por ejemplo:
<html>
<head>
<title>Div Align Attribbute</title>
</head>
<body>
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
</body>
</html>
¡Importante!
Este atributo ya no se admite en HTML5. CSS es el camino a seguir.
El atributo Div Align puede ser usado para alinear horizontalmente el contenido dentro de un div. En el siguiente ejemplo, el texto se centrará dentro del div.
<div align="center">
This Text Will Be Centered
</div>** Este atributo no es compatible con HTML5 y CSS Text Align debe ser usado en su lugar.
Ejemplo del atributo font color
Este atributo se utiliza para establecer un color para el texto encerrado en una etiqueta <font>.
Importante:
Este atributo no es compatible con HTML5. En lugar, este artículo de freeCodeCamp específica un método CSS que se puede utilizar.
Nota:
Un color puede también ser especificado usando un 'código hex' o un 'código rgb', en lugar de usar un nombre.
Ejemplo:
- El Atributo de nombre de color
<html>
<body>
<font color="green">Font color example using color attribute</font>
</body>
</html>
Atributo de código Hex
<html>
<body>
<font color="#00FF00">Font color example using color attribute</font>
</body>
</html>
Atributo RGB
<html>
<body>
<font color="rgb(0,255,0)">Font color example using color attribute</font>
</body>
</html>
Ejemplo del atributo font size
Este atributo especifica el tamaño de la fuente, ya sea como un valor numérico o relativo. Los valores numéricos van del 1 al 7, siendo 1 el más pequeño y 3 el predeterminado. También se puede definir utilizando un valor relativo, como +2 o -3, que lo establece en relación con el valor del atributo de tamaño del elemento <basefont>, o en relación con 3, el valor predeterminado, si no existe ninguno.
Sintaxis:
<font size="number">
Ejemplo:
<html>
<body>
<font size="6">This is some text!</font>
</body>
</html>Nota: El tamaño del atributo <font> no es compatible con HTML5. Utilice CSS en su lugar.
Ejemplo del atributo img align
El atributo align de una imagen específica dónde debe alinearse la imagen de acuerdo con el elemento circundante.
Valores de Atributo:
right- Alinea la imagen con la derecha
left - Alinea la imagen a la izquierda
top - Alinea la imagen en la parte superior
bottom - Alinea la imagen en el fondo
middle - Alinea la imagen en el medio.
Por ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Align Attribute</title>
</head>
<body>
<p>
This is an example. <img src="image.png" alt="Image" align="middle" /> More text right here
<img src="image.png" alt="Image" width="100" />
</p>
</body>
</html>
También podemos alinear a la derecha si queremos:
<p>This is another example<img src="image.png" alt="Image" align="right" /></p>
Por favor, tenga en cuenta que el atributo align no es compatible en HTML5, y debe usar CSS en su lugar. Sin embargo, todavía es compatible con todos los principales navegadores.
El atributo img width
El atributo HTML 'width' se refiere al ancho de una imagen. El valor en las comillas es la cantidad de píxeles.
Por ejemplo, si ya tiene un enlace a una imagen configurada a través del atributo src, puedes agregar el atributo width de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Img Width Attribute</title>
</head>
<body>
<img src="image.png" alt="Image" width="100" />
</body>
</html>
En el fragmento de código anterior hay una etiqueta de imagen y la imagen tiene un ancho de 100 píxeles. width="100".
Ejemplo del atributo img src
El atributo <img src> se refiere a la fuente de una imagen que desea mostrar. La etiqueta img no mostrará una imagen sin el atributo src. Sin embargo, si se establece la fuente en la ubicación de la imagen, puede mostrar cualquier imagen.
Hay una imagen del logotipo de freeCodeCamp ubicada en: https://avatars0.githubusercontent.com/u/9892522?v=4&s=400
Puede configurar eso como la imagen usando el atributo src.
<html>
<head>
<title>Img Src Attribute Example</title>
</head>
<body>
<img src="https://avatars0.githubusercontent.com/u/9892522?v=4&s=400" />
</body>
</html>
El cógido de anterior se muestra así:
El atributo src es compatible con todos los navegadores.
También puede tener un archivo alojado localmente como su imagen.
Por ejemplo, <img src="images/freeCodeCamp.jpeg> funcionaría si tuviera una carpeta llamada images que tuviera el freeCodeCamp.jpeg dentro, siempre que la carpeta 'images' estuviera en la misma ubicación que el archivo index.html.
../files/index.html
..files/images/freeCodeCamp.jpeg
Visión general
¿Qué son las entidades HTML?
Las entidades HTML son caracteres que se utilizan para remplazar caracteres reservados en HTML o para caracteres que no aparecen en el teclado. Algunos caracteres están reservados en HTML. Si utiliza los signos menos que (<) o más que (>) en su texto, el navegador podría confundirlos con etiquetas.
¿Para qué se usan?
Como se mencionó acerca de las entidades HTML se utilizan para reemplazar los caracteres reservados que están reservados por HTML.
¿Cómo los utilizamos?
Un carácter entidad tiene un aspecto similar a esto:
<!-- format &[entity_name]; -->
<!-- example for a less-than sign (<) -->
<O
<!-- &#[entity_number]; -->
<!-- example for a less-than sign (<) -->
<Guía de referencia
Esto no es una lista exhaustiva, pero los enlaces a continuación podrán brindarle más entidades si las que se encuentran a continuación no funcionan para sus necesidades. Happy Coding :bowtie:
Character Entity Name Entity Number Description
  Space
! ! Exclamation mark
” " Quotation mark
# # Number sign
$ $ Dollar sign
¢ ¢ ¢ Cent sign
€ € € Euro sign
£ £ £ GBP sign
¥ ¥ ¥ Yen sign
% % Percent sign
& & & Ampersand
’ ' Apostrophe
( ( Opening/Left Parenthesis
) ) Closing/Right Parenthesis
* * Asterisk
+ + Plus sign
, , Comma
- - Hyphen
. . Period
/ / Slash
© © © Copyright
® ® ® Registered Trademark
” " " double quotation mark
> > > Greater-than sign
< < < Less-than sign
• • • Bullet pointEjemplo de formulario HTML
Básicamente, los formularios se utilizan para recolectar datos ingresados por un usuario, que luego se envían al servidor para su posterior procesamiento. Se pueden usar para diferentes tipos de entradas de usuario, como nombre, correo electrónico, etc.
El formulario contiene elementos de control que se envuelven alrededor de etiquetas <form></form>, como input, que puede tener tipos como:
textemailpasswordcheckboxradiosubmitrangesearchdatetimeweekcolordatalist
Ejemplo de código:
<form>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
<input type="radio" name="gender" value="male" />Male<br />
<input type="radio" name="gender" value="female" />Female<br />
<input type="radio" name="gender" value="other" />Other
<input list="Options" />
<datalist id="Options">
<option value="Option1"></option>
<option value="Option2"></option>
<option value="Option3"></option>
</datalist>
<input type="submit" value="Submit" />
<input type="color" />
<input type="checkbox" name="correct" value="correct" />Correct
</form>
Otros elementos que el formulario puede contener:
textarea- Es un cuadro de varias líneas, se usa con mayor frecuencia para agregar texto, por ejemplo, comentario. El tamaño del área se define por el número de filas y columnas.select- Junto con la etiqueta<option></option>crea un menú de selección desplegable.button- El elemento botón se puede utilizar para definir un botón en el que se puede hacer clic.
MÁS INFORMACIÓN SOBRE FORMULARIOS HTML
Los formularios HTML son necesarios cuando deseas recolectar algunos datos del visitante del sitio. Por ejemplo, durante el registro del usuario, le gustaría recopilar información como nombre, dirección de correo electrónico, tarjeta de crédito, etc.
Un formulario tomará la entrada de del visitante del sitio y luego la publicará en una aplicación de back-end como CGI, ASP Script o PHP script, etc. La aplicación back-end realizará el procesamiento requerido de los datos pasados en función de la lógica empresarial definida dentro de la aplicación.
Hay varios elementos de formulario disponibles, como campos de texto, campos de área de texto, menús desplegables, botones de radio, casillas de verificación, etc.
La etiqueta HTML <form> es usa para crear un formulario en HTML y tiene la siguiente sintaxis -
<form action="Script URL" method="GET|POST">form elements like input, textarea etc.</form>
Si el método form no está definido, por defecto será "GET".
La etiqueta form también puede tener un atributo llamado "target" que especifica dónde se abrirá el enlace. Se puede abrir en la pestaña del navegador, en un marco, o en la actual ventana.
El atributo action define la acción que se realizará cuando se envíe formulario. Normalmente, los datos del formulario se envían a una página web en el URL del script cuando el usuario hace clic en el boton submit Enviar. Si se omite el atributo action, la acción se establece en la página actual.
Ejemplo de audio HTML5
Antes HTML5, los archivos de audio tenían que reproducirse en un navegador usando un complemento como Adobe Flash. El HTML
El siguiente fragmento de código agrega un archivo de audio con el nombre de archivo tutorial.ogg o tutorial.mp3. El elemento indica archivos de audio alternativos entre los que puede elegir el navegador. El navegador utilizará el primer formato reconocido.
Ejemplo 1
<audio controls>
<source src="tutorial.ogg" type="audio/ogg" />
<source src="tutorial.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Ejemplo 2
<audio src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" controls loop autoplay></audio>
El atributo controls incluye controles de audio como reproducir, pausa y volumen. Si no utiliza este atributo, no se mostrará ningún control.
El elemento <source> permite indicar archivos de audio alternativos entre los que puede elegir el navegador. El navegador utilizará el primer formato que reconozca. El texto entre las etiquetas <audio> y </audio> puede mostrarse en el navegador que no admita el elemento <audio> HTML5 .
El atributo autoplay reproducirá automáticamente su archivo de audio en segundo plano. Se considera mejor práctica permitir que los visitantes elijan reproducir un audio.
El atributo precarga indica lo que debe hacer el navegador si el reproductor no está configurado para reproducción automática.
El atributo loop reproducirá el archivo de audio en un bucle continuo si se menciona.
Como se trata de html5, algunos navegadores no lo admiten. Puedes comprobarlo en https://caniuse.com/#search=audio
Ejemplo de elementos semánticos HTML5
Los elementos semánticos de HTML describen claramente su significado de una manera legible por humanos y máquinas. Elementos como <header>, <footer> y <article> todos se consideran semánticos porque describen con precisión el propósito del elemento y el tipo de contenido que hay dentro de ellos.
Una historia rápida
HTML fue originalmente creado como un lenguaje de marcado para describir documentos en los inicios de Internet. A medida que el Internet creció y fue adoptado por más personas, sus necesidades cambiaron. Donde el internet originalmente fue destinado para compartir documentos cinetificos, ahora las personas también quería compartir otras cosas. Muy rápidamente, la gente empezó a querer hacer que la web se viera mejor. Debido a que la web no se creo inicialmente para ser diseñada, los programadores utilizaron diferentes trucos para diseñar las cosas de diferentes maneras. En lugar de usar el <table></table> para describir información usando una tabla, los programadores las usarían para colocar otros elementos en la página. A medida que avanzaba el uso de diseños diseñados visualmente , los programadores comenzaron a usar una etiqueta genérica "no semántica" como <div>. A menudo darían a estos elementos un atributo de class o id para describir su propósito. Por ejemplo, en lugar de <header> a menudo se escribía como <div class="header">. Como HTML5 es todavía relativamente nuevo, este uso de elementos no semánticos sigue siendo muy común en los sitios web de hoy.
Lista de nuevos elementos semánticos
Los elementos semánticos agregados en HTML5 son:
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
Elementos como <header>, <nav>, <section>, <article>, <aside>, y<footer> actúan más o menos como elementos <div>. Agrupan otros elementos en secciones de página. Sin embargo, cuando una etiqueta <div> puede contener cualquier tipo de información, es fácil identificar que tipo de información iría en una región semántica.
Un ejemplo de diseño de elementos semánticos por w3schools.
Beneficios de elementos semánticos
Para ver los beneficios de los elementos semánticos, aquí hay dos piezas de código HTML. El primer bloque de código utiliza elementos semánticos.
<header></header>
<section>
<article>
<figure>
<img />
<figcaption></figcaption>
</figure>
</article>
</section>
<footer></footer>
Mientras que este segundo bloque de código utiliza elementos no semánticos:
<div id="header"></div>
<div class="section">
<div class="article">
<div class="figure">
<img />
<div class="figcaption"></div>
</div>
</div>
</div>
<div id="footer"></div>
En primer lugar, es mucho más fácil de leer. Esto es probablemente la primera cosa que notará al mirar el primer bloque de código usando elementos semánticos. Este es un pequeño ejemplo, pero como programador puedes estar leyendo cientos o miles de líneas de código. Cuanto más fácil sea de leer y entender ese código, más fácil será su trabajo.
Tiene mayor accesibilidad. No eres el único que encuentra los elementos semánticos más fáciles de entender. Los motores de búsqueda y las tecnologías de asistencia (como los lectores de pantalla para usuarios con discapacidad visual) también pueden comprender el contexto y contenido de su sitio web, lo que significa una mejor experiencia para sus usuarios.
En general, los elementos semánticos también conducen a un código más consistente. Al crear un encabezado usando elementos no semánticos, diferentes programadores pueden escribirlo como <div class="header">, <div id="header">, <div class="head">, o simplemente <div>. Hay muchas formas en las que puedes crear un elemento header, y todas dependen de la preferencia personal del programador. Al crear un elemento semántico estándar, lo hace más fácil para todos.
Desde octubre 2014; HTML4 se actualizó a HTML5, junto con algunos "nuevos" elementos "semánticos". Hasta el día hoy, puede que algunos de nosotros todavía podríamos estar confundidos en cuanto a porque tantos elementos diferentes que no parecen mostrar cambios importantes.
<section> y <article>
¿Cuál es la diferencia?, te preguntarás. Ambos elementos se utilizan para seccionar un contenido, y sí, definitivamente se pueden usar indistintamente. Es una cuestión de en qué situación. HTML4 ofrecía solo un tipo de elemento contenedor, que es <div>. Si bien esto todavía se usa en HTML5, HTML5 nos proporcionó con <section> y <article> y de cierta forma remplazar <div>.
Los elementos <section> y <article> son conceptualmente similares e intercambiables. Para decidir cuál de estos se deben elegir, tome nota de lo siguiente:
- Se pretende que un artículo sea distribuible o reutilizable de forma independiente.
- Una sección es una agrupación temática de contenido.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
<section>
<p>Sport</p>
<article>Story 1</article>
<article>Story 2</article>
<article>Story 3</article>
</section>
</section>
<header> y <hgroup>
El elemento <header> generalmente se encuentra en la parte superior de un documento, una sección o un artículo y generalmente contiene el encabezado principal y algunas herramientas de navegación y de búsqueda.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
El elemento <hgroup> debe usarse donde desee un encabezado principal con uno o más subtítulos.
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
RECUERDA, que el elemento <header> puede contener cualquier contenido, pero el elemento <hgroup> solo puede contener otros encabezados, es decir <h1> a <h6> e incluido <hgroup>.
<aside>
El elemento <aside> está diseñado a contenido que no es parte del flujo del texto en el cual aparece, sin embargo, todavía está relacionado de alguna manera. Esto de <aside> como una barra lateral de su contenido principal.
<aside>
<p>
This is a sidebar, for example a terminology definition or a short background to a historical
figure.
</p>
</aside>
Antes de HTML5, nuestros menús eran creados con <ul> y <li>. Ahora, junto con estos, podemos separar los elementos de nuestro menú con un <nav>, para navegar entre sus páginas. Puede tener cualquier cantidad de elementos <nav> en una página, por ejemplo, es común tener una navegador global en la parte superior (en el <header>) y un navegación local como barra lateral(en un elemento <aside>).
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
</nav>
<footer>
Si hay un <header> debe de haber un <footer>. Un <footer> es genralmente encontrado en el fondo de un documento, una sección, o un artículo. Al igual que el <header> el contenido es generalmente metainfromación, como detalles del autor, información legal, y /o links a infromación relacionada. También es válido incluir elementos <section> dentro de un pie de página.
<footer>©Company A</footer><small>
El elemento <small> a menudo aparece dentro de un elemento <footer> o <aside> que normalmente contiene información de derechos de autor o de avisos legales, y otras letras pequeñas similares. Sin embargo, esto no pretende hacer el texto más pequeño. Simplemente, describe su contenido, no prescribir la presentación.
<footer><small>©Company A</small> Date</footer><time>
El elemento <time> permite adjuntar una fecha ISO 8601 inequívoca a una versión legible por humanos de esa fecha.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>¿Por qué molestarnos con <time>? Mientras los humanos pueden leer la hora que puede eliminar la ambigüedad a través del contexto de manera normal, las computadoras pueden leer la fecha ISO 8601 y ver la fecha, la hora, y la zona horaria.
<figure> y <figcaption>
<figure> es para envolver el contenido de su imagen a su alrededor, y <figcaption> es para subtitular su imagen.
<figure>
<img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" />
<figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>Ejemplo de vídeo HTML5
Antes de HTML5, para reproducir un video en una página web, se necesitaba usar un complemento, como Adobe Flash Player. Con la introducción de HTML5, ahora puede colocarlo directamente en la página misma. El HTML.
Para colocar el archivo de video en la página web, simplemente agregue este fragmento de código y cambie el src de archivo de audio.
<video controls>
<source src="tutorial.ogg" type="video /ogg" />
<source src="tutorial.mp4" type="video /mpeg" />
Your browser does not support the video element. Kindly,update it to latest version.
</video>
El atributo controles incluye los controles de vídeo, similares a la reproducción, la pausar, y el volumen.
Esta función es compatible con todos los navegadores modernos/actualizados. Sin embargo, no todos admiten el mismo formato de video. Mi recomendación para una amplia gama de compatibilidad es MP4, ya que es el formato más ampliamente aceptado. También hay otros dos formatos (WebM y Ogg) que son compatibles con Chrome, Firefox, y Opera.
El elemento permite indicar los archivos de video alternativos entre los cuales el navegador puede elegir. El navegador utilizará el primer formato que reconozca. En HTML5, hay tres formatos de videos compatibles: MP4, WebM, y Ogg.
El texto entre etiquetas solo se mostrará en los navegadores que no lo admitan.
Hay varios elementos diferentes de etiquetas de video, muchas de estas explicaciones son basan en los documentos web de Mozilla(enlace a continuación). Hay aún más si hace clic en el enlace a continuación.
autoplay
"autoplay" se puede establecer true o false. Para establecerlo en true agrégualo a la etiqueta, si no está presente en la etiqueta, se establece en false. Si se establece true el video comenzará a reproducirse tan pronto como se haya almacenado en búfer lo suficiente para que pueda reproducirse. Muchas personas encuentran que la reproducción automática de videos es pertubadora o molesta, así que use esta función con moderación. También tenga en cuenta que algunos navegadores móviles, como Safari para iOS, ignoran este atributo.
<video autoplay>
<source src="video.mp4" type="video/mp4" />
</video>
poster
El atributo "poster" es la imagen que se muestra en el vídeo hasta que el usuario hace clic para reproducirlo.
<video poster="poster.png">
<source src="video.mp4" type="video/mp4" />
</video>
controls
El atributo "controls" se puede establecer true o false y contralara si aparecen controles como el botón de reproducir/pausa o el control deslizante de volumen. Para establecerlo en true, agréguelo a la etiqueta, si no está presente en la etiqueta, se establece en false.
<video controls>
<source src="video.mp4" type="video/mp4" />
</video>
Hay muchos más atributos que se pueden agregar que son opcionales para personalizar el reproductor de video en la página. Para obtener más información, haga clic en los enlaces a continuación.
Ejemplo de almacenamiento Web HTML5
El almacenacmiento Web permite a las aplicaciones web almacenar hasta 5MB de información en el almacenamiento del navegador por origen (por dominio y protocolo).
Tipos de Almacenamiento Web
Hay dos objetos para almacenar datos en el cliente:
window.localStorage: almacena datos sin fecha de caducidad y dura hasta que se eliminan.
// Store Item
localStorage.setItem("foo", "bar");
// Get Item
localStorage.getItem("foo"); //returns "bar"window.sessionStorage: almacena datos para una sesión, donde los datos se pierden cuando se cierra el navegador/pestaña del navegador.
// Store Item
sessionStorage.setItem("foo", "bar");
// Get Item
sessionStorage.getItem("foo"); //returns "bar"Dado que la implementación actual solo admite asignaciones de cadena a cadena, debe serializar y des serializar otras estructuras de datos.
Puede hacerlo usando JSON.stringify() and JSON.parse().
Por ejemplo, para el JSON dado
var jsonObject = { 'one': 1, 'two': 2, 'three': 3 };Primero convertimos el objeto JSON en cadena y lo guardamos en el almacenamiento local:
localStorage.setItem('jsonObjectString', JSON.stringify(jsonObject));Para obtener el objeto JSON de la cadena guardada en el almacenamiento local:
var jsonObject = JSON.parse(localStorage.getItem('jsonObjectString'));Ejemplo de enlaces mailto
En enlace mailto es un tipo de hipervínculo (<a href=""></a>) con parámetros especiales que permite especificar destinatarios adicionales, una línea de asunto y/o un texto de cuerpo.
La sintaxis básica con un destinatario es:
<a href="mailto:friend@something.com">Some text</a>¡Más perzonalización!
Agregar un asunto a ese correo
Si desea agregar un asunto específico a ese correo, tenga cuidado de agregar %20 o + en todas partes donde haya un espacio en la línea de asunto. Una manera fácil de asegurarse de que está correctamente formateado es utilizar un decodificador / codificador de URL.
Agregando el cuerpo de texto:
Del mismo modo, puedes agregar un mensaje específico en la parte del cuerpo del correo electrónico: Nuevamente, los espacios deben remplazarse por %20 o + . Después el parámetro del sujeto, cualquier parámetro adicional debe ser precedido de &.
Ejemplo: Supongamos que quieres que los usuarios envíen un correo electrónico a sus amigos sobre su progreso en Free Code Camp:
Dirección: vacía
Sujeto: Grandes noticias
Cuerpo: Me estoy convirtiendo en desarrollador
Tu enlace html ahora:
<a href="mailto:?subject=Great%20news&body=I%20am%20becoming%20a%20developer">Send mail!</a>Aquí, hemos dejado mailto vacío (mailto:?). Esto abrirá el cliente de correo electrónico del usuario y el usuario agregará la dirección del destinatario ellos mismos.
Agregar más destinatarios:
De la misma manera, puede agregar parámetros CC y bcc. ¡Separa cada dirección por una coma!
Los parámetros adicionales deben ir precedidos de &.
<a href="mailto:firstfriend@something.com?subject=Great%20news&cc=secondfriend@something.com,thirdfriend@something.com&bcc=fourthfriend@something.com">Send mail!</a>