2.Componentes de HTML5Ramiro Estigarribia Canese

1.Salto de Línea <br>➔ El texto que escribimos en una página aparece en la

misma línea, no se tiene en cuenta la tecla ENTER.➔ Para indicarle al navegador que continúe en la

próxima línea debemos hacerlo con <br>.➔ Si queremos que aparezca un línea: usamos <hr>

Windows<br>Linux<br>Adroid<br>Mac<br>

2.Párrafos <p> </p>➔ Es un conjunto de líneas referentes a un mismo tema. ➔ Todo lo que encerramos entre <p> y </p> aparecerá

separado con respecto al próximo párrafo.➔ En un párrafo pueden haber saltos de línea <br>.

<p>Windows</p><p>Linux</p>Adroid<br>Mac<br>

3.Títulos <h1> </h1>➔ Para indicar los títulos, se utiliza:

<h1><h2><h3><h4><h5><h6>➔ El título de mayor nivel y tamaño es <h1> ➔ Según la importancia, elegimos el adecuado.

<h1>Sistemas</h1>Windows<br>Linux<br>Adroid<br>Mac<br>

4.Énfasis <em> </em> <strong> </strong>

➔ Permite significa realzar la importancia.➔ Se muestra el texto con <strong> en negrita y

<em> en letra itálica.➔ Para resaltar texto, se utiliza:

<mark> </mark>

<em>Windows</em><br><strong>Linux</strong><br>Adroid<br>Mac<br>

5.Hipervínculo<a href=> </a>Permite cargar un enlace a otra página. El navegador al encontrar esta marca muestra un texto subrayado, y al hacer clic con el mouse, carga la página indicada.

<h1>Inicio</h1><a href=http://www.abc.com.py>Noticias</a>

6.Imágen <img >➔ Se utiliza <img>, la misma no tiene una marca de

finalización. (similar a <br>)➔ Los formatos son gif, jpg y png.➔ La sintaxis es: <img src=foto.jpg>

<img src=messi.jpg>

7.Lista Numerada <ol><li>La Lista inicia con <ol>Cada ítem de la lista va entre: <li> y </li>Luego se encarga el navegador de numerar cada uno de los ítems.

<ol><li>Windows</li><li>Linux</li><li>Android</li><li>Mac</li></ol>

8.Lista no Numerada <ul><li>No utiliza un número delante de cada ítem sino un pequeño símbolo gráfico.<ul> unordered list<li> list item

<ul><li>Windows</li><li>Linux</li><li>Android</li><li>Mac</li></ul>

Más Elementos<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>

9.HTML5 <section> ➔ "Una sección es una agrupación temática de los

contenidos, por lo general con un título."➔ La página principal de un sitio Web puede ser

dividida en secciones para la introducción, el contenido y la información de contacto.

<section> <h1>WWF</h1> <p>The World Wide Fund for Nature is....</p></section>

10.Elemento <article>Específica 1 contenido nuevo.Ejemplos en los que se recomienda <article>:➔ Entradas de un Blog➔ Artículos de periódico

<article> <h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p></article>

11.Elemento <header>Especifica la cabecera de un documento o sección.

<article><header><h1>What Does WWF Do?</h1><p>WWF's mission:</p></header><p>WWF's mission is to stop the degradation of ou future in which humans live in harmony with nature.</p></article>

12.Elemento <footer>Especifica la pie de página de un documento o sección.

<footer><p>Posted by: Hege Refsnes</p><p>Contact information: someone@example.com</p></footer>

13.Tablas <table><tr><td>Permite mostrar datos en forma de filas y columnas.<table> Es el comienzo de la tabla.<tr> Es el comienzo de una fila. <td> Es el comienzo de una columna.<th> Es el comienzo de un título. (opcional).

<table border=1><tr><td>Chrome</td><td>50,3 %</td></tr><tr><td>Explorer</td><td>27,5 %</td></tr><tr><td>Firefox</td><td>20,5 %</td></tr></table>

14.Caracteres especiales (Ñ)Algunos caracteres no se pueden mostrar, ya que el navegador confunde con marcas HTML.La solución es utilizar otra sintaxis:< &lt;> &gt;& &amp;" &quot;Espacio en blanco &nbsp;

Para indicar que el sitio tendrá acentos y ñ:<meta charset=utf-8>

15.Formularios <form>➔ Permite cargar datos al servidor.➔ Es el medio ideal para registrar datos, solicitar

productos, sacar turnos etc.➔ HTML solo tiene el objetivo de crear el formulario.➔ Para guardar los datos, es necesario utilizar un

lenguaje en el servidor (PHP, ASP, JSP, etc.)

15.Formularios <form>

<form action=guardarDB.php>Ingrese su nombre:<input type=text name=nombre><br>Ingrese su fecha de nacimiento:<input type=date name=fecha><br><input type=submit></form>

15.Formularios Campo input <input>Permite definir cuadros de texto, fechas, números, claves, botones, etc. <input type= color

dateemailfilehiddennumberpasswordrange

texttextareatimetelurlweek

15.Formularios Campo input <input>

<form action=edad.php>Edad:<input type=number name=edadmin=1 max=100><br>Hora:<input type=time name=hora><br><input type=submit></form>

16. Campo <input> Parámetros: readonly, valueLa propiedad readonly especifica solo lectura. La propiedad value especifica un valor por defecto.

<form action=enviar.php><input type=text name=empresa value=Tigo readonly><input type=submit value=”Enviar SMS”></form>

17. Campo <input type=checkbox....>

<form action=enviar.php><strong>Seleccione una o varias:</strong><br><input type=checkbox name=claro>claro <br><input type=checkbox name=vox>vox<br><input type=checkbox name=tigo>tigo<br><input type=submit></form>

18. Texto en movimiento.<marquee> (obsoleto en HTML5)

Permite conseguir texto en movimiento. El movimiento, la dirección de desplazamiento, la velocidad del mismo, son configurables.

scrolldelay: Define la velocidad.Un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20.

<marquee scrolldelay=5> PRUEBA</marquee>

19.El atributo requiredAl incluir el atributo required dentro de un elemento <input>, automáticamente se hace obligatorio su llenado y al ser un atributo tipo booleano, solo se requiere su presencia sin más.

<input type=text name=nombre required>

20.El atributo pattern<form action=pais.php>Country code: <input type=text name=pais pattern="[A-Za-z]{3}" title="Three letter country code"><input type="submit"></form>

21.Etiqueta Object. ➔ Define un objeto incrustado en un documento HTML. ➔ Permite incrustar multimedia (como audio, video,

applets de Java, ActiveX, PDF y Flash) en sus páginas web.

➔ También puede utilizar la etiqueta <object> para incrustar otra página web en el documento HTML.

Ejemplo: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_object

< object type="text/html" data="http://www.abc.com.py" width="400" height="400"> < /object>

22.Etiqueta Video➔ Permite insertar video en un sitio.➔ Contiene un controlador: play, pausa, avanzar, etc.

Ejemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"></video>

23.Etiqueta Audio Control➔ Permite insertar audio en un sitio: mp3, ogg, etc.➔ Contiene un controlador: play, pausa, avanzar, etc.

Ejemplo: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all

<audio controls> <source src="clasica.mp3" type="audio/mpeg"></audio>