Web viewrepasando html 5

26
REPASANDO HTML 5 Todos tenemos una estructura básica al realizar un sitio web y en HTML5 no hay excepción, por eso vamos a ver como es una Estructura básica de un documento de HTML5. Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio. 1 2 3 4 5 <!DOCTYPE html> <html lang="es"> <head> La etiqueta title la usamos para dar un título a la página web. La etiqueta META, la usamos para decirle al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad. 1 2 3 <title>Titulo de la web</title> <meta charset="utf-8" /> Las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia, el atributo REL que usamos en los links para cuestiones de SEO. REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED. 1 2 3 4 5 <link rel="stylesheet" href="estilos.css" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /> Ya terminamos con la parte no visible de la página web, es el turno del cuerpo o BODY, en el cuál vamos a utilizar las etiquetas de la estructura del sitio visual. La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo. Se recomienda usar sólo un H1 en una cabecera por cuestiones de SEO, pero es posible poner más de un H1 y HEADER.

Transcript of Web viewrepasando html 5

Page 1: Web viewrepasando html 5

REPASANDO HTML 5

Todos tenemos una estructura básica al realizar un sitio web y en HTML5 no hay excepción, por eso vamos a ver como es una Estructura básica de un documento de HTML5.

Empecemos con el DOCTYPE, es muy sencillo de escribir y ha sido recortado, después la etiqueta HTML la cual tiene el atributo LANG para el idioma del sitio.

12345

<!DOCTYPE html>

<html lang="es">

<head>

La etiqueta title la usamos para dar un título a la página web.

La etiqueta META, la usamos para decirle al navegador que tipo de codificado es el documento html, de preferencia usemos el UTF-8 que acepta nuestros acentos y ñ con mas compatibilidad.

123

<title>Titulo de la web</title>

<meta charset="utf-8" />

Las etiquetas link, son las que enlazan nuestros estilos CSS, los Favicones y los Feeds. Estas son muy cortas con excepción de el feed que sigue casi igual, solo que ahora usaremos algo que ya existia, el atributo REL que usamos en los links para cuestiones de SEO.

REL es para decir, que estamos enlazando, ya que el atributo TYPE no se utiliza a menos que usemos para enlazar el FEED.

12345

<link rel="stylesheet" href="estilos.css" />

<link rel="shortcut icon" href="/favicon.ico" />

<link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" />

Ya terminamos con la parte no visible de la página web, es el turno del cuerpo o BODY, en el cuál vamos a utilizar las etiquetas de la estructura del sitio visual.

La etiqueta HEADER es la cabecera donde va el nombre del sitio, el logotipo y descripción de la pagina web, ejemplo.

Se recomienda usar sólo un H1 en una cabecera por cuestiones de SEO, pero es posible poner más de un H1 y HEADER.

12345

<body><header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p></header>

La etiqueta HEADER es muy equivalente a crear un DIV con ID=”header”, pero ahora tenemos una etiqueta especial para ello.

Pasamos con el contenido o SECTION usando H2 de titulo y el contenido en etiquetas P dentro de una etiqueta llamada ARTICLE para artículos o post, esto por cuestiones de SEO que es muy recomendable también.

Page 2: Web viewrepasando html 5

123456

<section> <article> <h2>Titilo de contenido<h2> <p> Contenido (ademas de imagenes, citas, videos etc.) </p> </article></section>

SECTION es el equivalente a un DIV con ID=”contenido” y ARTICLE a un DIV con ID=”post” o“articulo”

1234

<aside> <h3>Titulo de contenido</h3> <p>contenido</p></aside>

La etiqueta ASIDE, lo que viene siendo nuestro SIDEBAR o barra lateral y es muy fácil de implementar con H3 de titulo y P de contenido dentro de ella. ASIDE es nuestro equivalente a un DIV con ID=”sidebar” o “barra”

La etiqueta FOOTER se utiliza para poner el autot, fecha de creación, copyright, etc…

123

<footer> </span><p style="padding-left: 30px;"><span style="color: #333399;"> Creado por mi el 2011</span></p><span style="color: #333399;"></footer>

La etiqueta FOOTER es nuestro equivalente a un DIV con ID=”footer” o “pie”

Nuestro código completo ejemplo1.html:

123456789101112131415161718192021222324252627282930

<!DOCTYPE html> <html lang="es">

<head><title>Titulo de la web</title><meta charset="utf-8" /><link rel="stylesheet" href="estilos.css" /><link rel="shortcut icon" href="/favicon.ico" /><link rel="alternate" title="Pozolería RSS" type="application/rss+xml" href="/feed.rss" /></head> <body> <header> <h1>Mi sitio web</h1> <p>Mi sitio web creado en html5</p> </header> <section> <article> <h2>Titilo de contenido<h2> <p> Contenido (ademas de imagenes, citas, videos etc.) </p> </article> </section> <aside> <h3>Titulo de contenido</h3> <p>contenido</p> </aside> <footer> Creado por mi el 2011 </footer></body></html>

Page 3: Web viewrepasando html 5

Cabeceras HTMLLas cabeceras html están definidas de <h1> a <h6> :

Ejemplo

<h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3>

HTML ParagraphsLos párrafos están definidos por la etiqueta <p>

Ejemplo

<p>This is a paragraph.</p><p>This is another paragraph.</p>

HTML Links

Los enlaces en HTML están definidos por la etiqueta <a> :

Ejemplo

<a href="http://www.w3schools.com">This is a link</a>

Href define la dirección de la página web a ir.

Imagénes HTML La imágenes en HTML están definidas con la etiqueta <img> .

La dirección del archivo (src), el texto alternativo (alt), y tamaño (width and height) son atributos de la etiqueta:

Ejemplo

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Line BreaksLa etiqueta <br> define un salto de línea sin empezar un nuevo párrafo.

Ejemplo

<p>This is<br>a para<br>graph with line breaks</p>

Negrita HTML La etiqueta HTML <b> define el texto en negrita.

Ejemplo

<p>This text is normal.</p><p><b>This text is bold</b>.</p>

HTML Italic La etiqueta HTML <i> define el texto en italic.

Page 4: Web viewrepasando html 5

Ejemplo

<p>This text is normal.</p><p><i>This text is italic</i>.</p>

Comentarios en HTML

Para añadir comentarios a tu código HTML se realiza de la siguiente manera. Los comentarios no son visualizados por el navegador.

Ejemplo

<!-- Write your comments here -->

Nota: Hay una exclamación en la etiqueta de apertura pero no en la de cierre.

Ejemplo

<!-- This is a comment --><p>This is a paragraph.</p><!-- Remember to add more information here -->

Tablas HTML

Number First Name Last Name Points

1 Eve Jackson 942 John Doe 803 Adam Johnson 674 Jill Smith 50

Definiendo las Tablas HTMLEjemplo

<table style="width:100%">  <tr>    <td>Jill</td>    <td>Smith</td>     <td>50</td>  </tr>  <tr>    <td>Eve</td>    <td>Jackson</td>     <td>94</td>  </tr></table>

Page 5: Web viewrepasando html 5

Explicación de creación de tablas:

Las tablas son definidas por la etiqueta <table>.

Para definir una fila se utiliza la etiqueta <tr> .

Para definir una celda dentro de una fila utilizamos la etiqueta <td> .

Para hacer títulos en una tablas usamos la <th> .

En la etiqueta <td> podemos utilizar otros elementos tales como texto, imágenes, listas,

otras tablas, etc.

Tabla HTML Table con bordes

Para añadir un borde a una table usamos el atributo “border”

Ejemplo

<table border="1" style="width:100%">  <tr>    <td>Jill</td>    <td>Smith</td>     <td>50</td>  </tr>  <tr>    <td>Eve</td>    <td>Jackson</td>     <td>94</td>  </tr></table>

Tabla con encabezados o títulos en HTML Ejemplo

<table style="width:100%">  <tr>    <th>Firstname</th>    <th>Lastname</th>     <th>Points</th>  </tr>  <tr>    <td>Eve</td>    <td>Jackson</td>     <td>94</td>  </tr></table>

Page 6: Web viewrepasando html 5

Listas desordenadas

Una lista desordenada empieza utilizando la etiqueta <ul>. Para cada element de la lista usamos la etiqueta <li> .

Lista desordenada

<ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul>

Estilos de listas desordenadasEstos son los diferente estilos de las listas desordenadas:

Style Description

list-style-type:disc The list items will be marked with bullets (default)

list-style-type:circle The list items will be marked with circles

list-style-type:square The list items will be marked with squares

list-style-type:none The list items will not be marked

Lista desordenada con disc de estilo

<ul style="list-style-type:disc">  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ul>

Listas ordenadas en HTML

Una lista ordenada empieza utilizando la etiqueta <ol>. Para cada elemento de la lista usamos la etiqueta <li>.Lista ordenada <ol>  <li>Coffee</li>  <li>Milk</li></ol>

Page 7: Web viewrepasando html 5

El atributo typeType Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Ejemplos de lista ordenada con números

<ol type="1">  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li></ol>

Listas horizontales

Para realizar una lista de manera horizontal, usaremos el estilo inline.

Lista horizontal

<!DOCTYPE html><html><head><style>ul#menu li {    display:inline;}</style></head><body><h2>Horizontal List</h2><ul id="menu">  <li>Apples</li>  <li>Bananas</li>  <li>Lemons</li>  <li>Oranges</li></ul> </body></html>

Page 8: Web viewrepasando html 5

Disposición de una página usando <div> Elements

Este ejemplo usa 4 divs para crear una disposición de columna

Ejemplo2

<body><div id="header"><h1>City Gallery Of London</h1></div><div id="nav">London<br>Paris<br>Tokyo<br></div><div id="section"><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Copyright © W3Schools.com</div></body>

La CSS

<style>#header {    background-color:black;    color:white;    text-align:center;    padding:5px;}#nav {    line-height:30px;    background-color:#eeeeee;    height:300px;    width:100px;    float:left;    padding:5px; }#section {    width:350px;    float:left;    padding:10px; }

Page 9: Web viewrepasando html 5

#footer {    background-color:black;    color:white;    clear:both;    text-align:center;    padding:5px; }</style>

Website Layout Using HTML5

HTML5 usa los siguientes elementos para definer la estructura de una web:

header Defines a header for a document or a section

nav Defines a container for navigation links

section Defines a section in a document

article Defines an independent self-contained article

aside Defines content aside from the content (like a sidebar)

footer Defines a footer for a document or a section

details Defines additional details

summary Defines a heading for the details element

This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout:

Ejemplo3

<body>

<header><h1>City Gallery</h1></header>

<nav>London<br>Paris<br>Tokyo<br></nav>

Page 10: Web viewrepasando html 5

<section><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></section>

<footer>Copyright © W3Schools.com</footer>

</body>

La CSS

<style>header {    background-color:black;    color:white;    text-align:center;    padding:5px; }nav {    line-height:30px;    background-color:#eeeeee;    height:300px;    width:100px;    float:left;    padding:5px; }section {    width:350px;    float:left;    padding:10px; }footer {    background-color:black;    color:white;    clear:both;    text-align:center;    padding:5px; }

Page 11: Web viewrepasando html 5

INTRODUCCIÓN

Jquery Mobile es un framework de interface de usuario, que nos permite construir páginas web, aplicaciones para móviles, Tables o de escritorio.

Esta basado en JQUERY. Emplea lenguaje HTML 5 y complementa con API que mejora su diseño y lo hace más iteractivo.

PAGINAS

Las páginas son las unidades primarias en jQuery Mobile y son usadas para agrupar contenido. Éstas pueden ser animadas para realizar las transiciones. Un documento HTML puede empezar con una página simple o montar un sistema de navegación entre ellas

Creación de una página en jQuery Mobile:

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>I Am Now A Mobile Developer!!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div></div>

</body></html>

Ejemplo explicado: El data-role="page" indica la creación de una página. El data-role="header" crea una barra de herramientas arriba de la página

normalmente usada para el título o botones de búsqueda. El data-role="main" define el contenido de la página (texto, imágenes, botones,

formularios, etc. La clase "ui-content" añade un margen y relleno dentro del contenido de la página. El data-role="footer" crea una barra de herramientas al final de la página.

Page 12: Web viewrepasando html 5

Creación de varias páginas en jQuery Mobile:

En jQuery Mobile, se pueden crear múltiples páginas en ÚNICO ARCHIVO HTML.

Cada página se separa con un id diferente en la etiqueta <div data-role=”page”> y usando la etiqueta <a href=”#paginadestino”>texto del enlace</a> para enlazarse entre ellas.

<div data-role="page" id="paginauno"> <div data-role="header"> <h1>Página principal</h1> </div> <div data-role="main" class="ui-content"> <p>Si pinchas en el siguiente enlace irás a la página 2.</p> <a href="#paginados">Ir a Página 2</a> </div> <div data-role="footer"> <h1>copyright sjcl</h1> </div></div> <div data-role="page" id="paginados"> <div data-role="header"> <h1>Página dos</h1> </div><div data-role="main" class="ui-content"> <p>Esta es la página dos. Si haces clic en el siguiente enlace irás a la página 1.</p> <a href="#paginauno">Ir a página 1</a> </div><div data-role="footer"> <h1> copyright sjcl </h1> </div></div>

Ejemplo explicado:

En este ejemplo tenemos una aplicación con dos páginas. Una llamada paginauno y otra llamada paginados. Para poder ir de la página uno a la página dos, en la página uno generamos un enlace utilizando la etiqueta <a href="#paginados">Ir a Página 2</a>. Hacemos lo mismo en la página dos para ir a la página uno <a href="#paginauno">Ir a página 1</a>. El símbolo # se usa para hacer enlaces dentro de una página.

Si quisiéramos hacer enlaces a páginas externas de de nuestro proyecto usaríamos la misma etiqueta <a href> pero sin usar el símbolo #. Ejemplo: <a href="externalfile.html">Go To External Page</a>.

Y si quisiéramos hacer enlaces a páginas fuera de nuestro proyecto: <a href="http://www.google.com">ir a google</a>.

Usando páginas como ventanas de diálogo

Page 13: Web viewrepasando html 5

Una página de diálogo es una ventana que se usa para mostrar o solicitar información.

Para crear una página de diálogo que se abre pulsando un link, se añade a la página diálogo que quieres: data-dialog="true".

<div data-role="page" id="pageone"> <div data-role="header"> <h1>Welcome To My Homepage</h1> </div> <div data-role="main" class="ui-content"> <p>Welcome!</p> <a href="#pagetwo">Go to Dialog Page</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div></div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>I'm A Dialog Box!</h1> </div> <div data-role="main" class="ui-content"> <p>The dialog box is different from a normal page, it is displayed on top of the current page and it will not span the entire width of the page. The dialog has also an icon of "X" in the header to close the box.</p> <a href="#pageone">Go to Page One</a> </div>

<div data-role="footer"> <h1>Footer Text In Dialog</h1> </div></div>

Ejemplo explicado:

Insertamos el código data-dialog="true” en la página que queremos que se convierta en página de diálogo.

Efectos de Transición en jQuery Mobile

Page 14: Web viewrepasando html 5

jQuery Mobile tiene una gran variedad de efectos de transición entre páginas.

Transition Description For Pages For Dialogs

fade Default. Fades to the next page Try it Try it

flip Flips to the next page from back to front Try it Try it

flow Throws the current page away and comes in with the next page Try it Try it

pop Goes to the next page like a popup window Try it Try it

slide Slides to the next page from right to left Try it Try it

slidefade Slides from right to left and fades in the next page Try it Try it

slideup Slides to the next page from bottom to top Try it Try it

slidedown Slides to the next page from top to bottom Try it Try it

turn Turns to the next page Try it Try it

none No transition effect Try it Try it

Consejo: Todos los efectos anteriormente descritos también pueden hacerse en dirección inversa, por ejemplo de izquierda a derecha. Para ello se usará el data-direction="reverse".

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>

REALIZAR EL EJERCICIO 0

Creando botones en jQuery Mobile

Un botón puede crearse de tres maneras diferentes:

Usando el elemento <input> Usando el elemento <button> con la clase class="ui-btn" Usando la etiqueta <a> con la clase class="ui-btn" (botón recomendado de los tres)

<input type="button" value="Button">

<button class="ui-btn">Button</button>

<a href="#anylink" class="ui-btn">Button</a>

Por defecto un botón ocupará toda la pantalla. Si queremos que un botón sólo ocupe lo que ocupa el texto del botón, añadiremos ui-btn-inline

Page 15: Web viewrepasando html 5

<a href="#pagetwo" class="ui-btn ui-btn-inline">Go to Page Two</a>

Para crear un botón de volver, en la etiqueta a añadimos el atributo data-rel="back". Esto automáticamente hace que volvamos a la pantalla anterior.

<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left"data-rel="back">Go Back</a>

Para agrupar botones utilizamos el atributo data-role="controlgroup" junto con ata-type="horizontal|vertical" para especificar si lo queremos horizontal o vertical.

<div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn">Button 3</a></div>

Iconos para los botones en jQuery Mobile

Para añadir un icono a un botón se utilizarán las siguientes clases:

<a href="#anylink" class="ui-btn ui-icon-search ">Search</a>

<a href="#anylink" class="ui-btn ui-icon-action ">Search</a>

Page 16: Web viewrepasando html 5
Page 17: Web viewrepasando html 5

Para mostrar el icono es necesario decirle donde se va a posicionar. Tenemos cuatro posiciones posible:

<a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-top">Arriba</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-right">Derecha</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-bottom">Debajo</a><a href="#anylink" class="ui-btn ui-icon-search ui-btn-icon-left">Izquierda</a>

REALIZAR EL EJERCICIO 0.1 y subirla a phonegap build

Listas en jQuery Mobile

Las listas en jquery mobile son listas estándar html5. Éstas pueden ser ordenadas <ol> y

desordenadas <ul>. Para crear una lista debemos aplicar el atributo data-role="listview" a las

etiquetas <ol> o <ul>. Si queremos que los ítems de las listas puedan ser pulsadas, debemos

especificar un enlace en cada <li>.

Para dar estilo a las listas con esquinas redondeadas y márgenes debemos usar el atributo

inset=”true”

<h2>Capitales del Mundo</h2> <ul data-role="listview" data-inset="true"> <li><a href="#">Londres</a></li> <li><a href="#">Barcelona</a></li> <li><a href="#">Bilbao</a></li> </ul>

Divisores de lista

Los divisores de listas se usan para organizar y agrupar los elementos de una lista en categorías

y secciones. Para especificar un divisor de lista, tenemos que añadir el atributo data-role="list-

divider" a un ítem de la lista <li>:

Page 18: Web viewrepasando html 5

  <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Europe</li> <li><a href="#">Norway</a></li> <li><a href="#">Germany</a></li> <li data-role="list-divider">Asia</li> <li><a href="#">India</a></li> <li><a href="#">Thailand</a></li> <li data-role="list-divider">Africa</li> <li><a href="#">Zimbabwe</a></li> <li><a href="#">Uganda</a></li></ul>

REALIZAR EL EJERCICIO 1 y subirla a phonegap build

jQuery Mobile Popups

Popups son similares a las ventanas de diálogo y se usan para mostrar pequeños textos, fotos,

mapas u otro contenido útil.

Para crear un popup usamos la etiqueta <a> y la etiqueta <div> añadiendo el atributo data-

rel="popup" a la etiqueta <a> y el atributo data-role="popup" a la etiqueta <div>.

Especificamos un id en la div y establecemos el href de la etiqueta a para ir al id especificado.

Note: La etiqueta <div> debe estar en la misma página que el enlace.

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>

<div data-role="popup" id="myPopup"> <p>This is a simple popup.</p></div>

Si quisieras añadir un botón de cierre al popup deberíamos añadir una etiqueta <a> en la en la

etiqueta <div> con el atributo data-rel="popup".

Ejemplo

<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show

Popup</a>

Page 19: Web viewrepasando html 5

<div data-role="popup" id="myPopup" class="ui-content">

<a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn ui-icon-delete ui-

btn-icon-notext ui-btn-right">Close</a>

<p>Contenido del popup.</p>

<p><b>Tip:</b> también me cierro pulsando fuera.</p>

</div>

Popup Photos

También podemos mostrar imágenes en un popup:

Ejemplo

<a href="#myPopup" data-rel="popup" data-position-to="window">

<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>

<div data-role="popup" id="myPopup">

<img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">

</div>

Botones en la cebecera

Normalmente el header se coloca en la parte superior de la página y contiene un logo o uno o dos botones (home, buscar, menú)

El código inferior añade un botón home a la izquierda del header y un buscar a la derecha.

Page 20: Web viewrepasando html 5

<div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">Home</a> <h1>Welcome To My Homepage</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-right">Search</a> </div>

Botones en el footer

El footer es localizado al final de la app y es más flexible que el header pudiendo añadir

muchos botones:

<div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Facebook</a> <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a> <a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a> </div></div>

Barras de navegación

Una barra de navegación consiste en un grupo de links que están alineados horizontalmente dentro del header o del footer.<div data-role="page" id="pageone"> <div data-role="header">

Page 21: Web viewrepasando html 5

<h1>Welcome To My Homepage</h1>

<div data-role="navbar"> <ul> <li><a href="#" data-icon="home">Home</a></li> <li><a href="#" data-icon="arrow-r">Page Two</a></li> <li><a href="#" data-icon="search">Search</a></li> </ul> </div> </div> <div data-role="main" class="ui-content"> <p>My Content..</p> </div>

<div data-role="footer"> <h1>My Footer</h1> </div></div>