Capítulo 1 - Páginas estáticas (Parte 07 de 09)

 7. Menú web

El menú de opciones es una parte integral de una aplicación web. El crearlo se vuelve bastante sencillo, si se utiliza la librería “jQuery”, por lo que primero se debe insertarlo en el código de la página con las siguientes sentencias:

La carpeta “menú” es la que contiene el plugin que ayuda a desarrollar la barra de menú; como se ve en el código siguiente, el menú es simplemente un conjunto de listas <ul> con divisiones <div> que pertenecen a una clase CSS determinada. El siguiente código genera un menú con sus opciones:

<div id="menu"> <ul class="menu" style="width: 100%"> <li><a href="#" class="parent"><span>Mis Datos</span></a> <div> <ul> <li><a href="#"><span>Cambiar Password</span></a></li> <li><a href="#"><span>Cerrar Sesi&oacute;n</span></a></li> </ul> </div> </li> <li> <a href="#" class="parent"><span>Categor&iacute;as</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 1</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 1.1</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1.1.1</span></a></li> <li><a href="#"><span>Sub Item 1.1.2</span></a></li> </ul> </div> </li> <li><a href="#"><span>Sub Item 1.2</span></a></li> <li><a href="#"><span>Sub Item 1.3</span></a></li> <li><a href="#"><span>Sub Item 1.4</span></a></li> <li><a href="#"><span>Sub Item 1.5</span></a></li> <li><a href="#"><span>Sub Item 1.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 1.7</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1.7.1</span></a></li> <li><a href="#"><span>Sub Item 1.7.2</span></a></li> </ul> </div> </li> </ul> </div> </li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#"><span>Sub Item 3</span></a></li> </ul> </div> </li> <li><a href="#" class="parent"><span>Productos</span></a> <div> <ul> <li><a href="#"><span>Sub Item 1</span></a></li> <li><a href="#"><span>Sub Item 2</span></a></li> <li><a href="#" class="parent"><span>Sub Item 3</span></a> <div> <ul> <li><a href="#" class="parent"><span>Sub Item 3.1</span></a> <div> <ul> <li><a href="#"><span>Sub Item 3.1.1</span></a></li> <li><a href="#"><span>Sub Item 3.1.2</span></a></li> </ul> </div> </li> <li><a href="#"><span>Sub Item 3.2</span></a></li> <li><a href="#"><span>Sub Item 3.3</span></a></li> <li><a href="#"><span>Sub Item 3.4</span></a></li> <li><a href="#"><span>Sub Item 3.5</span></a></li> <li><a href="#"><span>Sub Item 3.6</span></a></li> <li><a href="#" class="parent"><span>Sub Item 3.7</span></a> <div> <ul> <li><a href="#"><span>Sub Item 3.7.1</span></a></li> <li><a href="#"><span>Sub Item 3.7.2</span></a></li> </ul> </div> </li> </ul> </div> </li> </ul> </div> </li> <li class="last"> <a href="#"><span>Cerrar Sesi&oacute;n</span></a> </li> </ul> </div>

Capítulo 1 - Páginas estáticas (Parte 09 de 09)

 9. Componentes Bootstrap

Boostrap tiene muchos componentes, todos ellos son responsive, que se pueden usar en el desarrollo de los proyectos web. Entre ellos podemos apreciar los siguientes:

Botones:

Dropdown:

Jumbotron:

Alert:

Paneles:

Capítulo 1 - Páginas estáticas (Parte 08 de 09)

 8. Etiquetas avanzadas HTML

Con la última versión de HTML (5) han surgido unas características especiales que son bastante útiles al momento de realizar páginas web. Dentro de esas características se pueden resaltar las siguientes.

8.1 Canvas

Elemento que, a través de un lienzo, permite desarrollar elementos gráficos.

<canvas id="marco" style="border: 1px solid blue; width: 200px; height: 100px"></canvas> <script type="text/javascript"> var canvas = document.getElementById('marco'); var context = canvas.getContext('2d'); context.fillStyle = '#ff8f43'; // color de fondo context.fillRect(20, 30, 100, 50); </script>

8.2 SVG

A diferencia del elemento canvas (gráficos planos), SVG se utiliza para gráficos vectoriales.

<svg width=100 height=100 style="border: 1px solid blue"> <circle cx=50 cy=50 r=20 stroke="green" stroke-width=3 fill="red"/> </svg>

8.3 Audio

Hace posible la reproducción de un archivo de sonido.

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

"auto" almacena, temporalmente, el archivo multimedia para su reproducción continua.

controls: muestra los controles estándar para la reproducción del audio.

8.4 Video

Hace posible la reproducción de un archivo de video.

<video src="video.mp4" controls></video>

controls: muestra los controles estándar para la reproducción del video.

8.5 HTML Geolocation

Hace posible el reconocimiento de la ubicación geográfica del usuario, siempre y cuando esté usando un navegador que tenga implementado este servicio y que brinde su permiso.

8.5 Drag and Drop

Para arrastrar objetos de un lugar a otro, solo hay que establecer el atributo draggable=true en el elemento que se quiere mover. Drag and Drop se puede implementar prácticamente en cualquier elemento, incluidos archivos, imágenes, enlaces u otros nodos DOM.

8.6 Local Storage

Permite generar y administrar un espacio local en el disco que puede reemplazar a las cookies de versiones anteriores.

8.7 Application Cache

Representa a un mecanismo de memoria temporal para permitir que las aplicaciones basadas en la web se ejecuten sin conexión. Los desarrolladores pueden usar la interface de Application Caché (AppCache) para especificar los recursos que el navegador debería guardar en memoria temporal y tener disponibles para los usuarios cuando no estén conectados.

8.8 Web Workers

Permiten activar secuencias de comandos para ejecutar tareas intensivas de computación, sin bloquear la interfaz de usuario u otras secuencias de comandos para gestionar las interacciones del usuario.

8.9 Server-Sent Events (SSE)

Los Server-Sent Events (SSE) representan a una forma estandarizada de enviar información a un grupo de clientes; por ejemplo, puede utilizarse un feed de noticias que pasa por un servidor y que entrega ciertos datos, en forma regular, a un grupo de subscriptores.

Capítulo 1 - Páginas estáticas (Parte 06 de 09)

6. Formularios

En HTML, el tag <form> contiene todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input>, permite definir diferentes elementos (botones y cuadros de texto), como se aprecia según el cuadro siguiente:

<form>

Atributos específicos

• action = "url" – Dirección de envío de los datos del formulario.
• method = "POST o GET" - empleado al enviar el formulario.
• enctype = "application/x-www-form-urlencoded o multipart/form-data" - Codificación empleada para envío de información.
• accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos de documentos aceptados por el servidor.
• autocomplete: define el autocompletado.
• novalidate: deja de validar el formulario.
• Otros: accept-charset, onsubmit, onreset

Tipo de elemento

• Bloque

Descripción

• Se emplea para insertar un formulario en la página.

Los formularios utilizan los atributos action y method.

El atributo action, indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios, esta aplicación también se encarga de generar la respuesta que muestra el navegador.

El atributo method, específica como se envían los datos del formulario al servidor. Los valores para method son GET y POST, siendo GET por defecto. El método POST hace posible el envío de mayor cantidad de información que GET; este envía hasta 500 bytes de información, no permite el envío de archivos adjuntos. Asimismo, GET hace que los datos se vean en la barra de direcciones del navegador, mientras que con POST no se pueden ver.

Los formularios agrupan objetos visuales para ser llenados con datos o seleccionar datos de estos objetos. La siguiente lista muestra un resumen:

<input>

Atributos específicos

• type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button | color | date | time | email | color | datetime" - Tipo de objeto contenido en formulario
• name = "texto" – Nombre de objeto
• value = "texto" – Asigna valor en objeto
• maxlength = "numero" – Cantidad de caracteres para los controles de texto y de password
• checked = "checked" – Marca a los checkbox y radiobutton indicando seleccionado.
• disabled = "disabled" – Deshabilita el objeto, no hay acceso a él.
• readonly = "readonly" – Contenido solo de lectura.
• src = "url" – En botones con imágenes se da la dirección de la imagen.
• alt = "texto" – Texto alternativo para el objeto.
• Autocomplete = Permite el autocompletado
• Autofocus = Enfoca el objeto

Tipo de elemento

• En línea y etiqueta vacía

Las etiquetas <fieldset> agrupa conjuntos de objetos del formulario y <legend> da un título al conjunto.

<fieldset>

• Se emplea para agrupar varios objetos de un formulario.

Tipo de elemento

• Bloque

<legend>

• Título de un conjunto de objetos del formulario agrupados con fieldset.

Tipo de elemento

• En línea

Una etiqueta es texto, solo de lectura, que describe o indica, el ingreso o selección, que debe hacer el usuario y se crea con la etiqueta <label>.

<label>

• Se emplea para indicar el ingreso o selección que debe hacer el usuario

Atributos específicos

• for = "id_de_elemento" – Identificador de objeto al cual hace referencia.
• Otros: accesskey, onfocus y onblur

Tipo de elemento

• En línea

form

• Indica a que formulario pertenece.

Para ingresar texto de varias líneas se usa la etiqueta <textarea>.

<textarea>

Se emplea para incluir un área de texto en un formulario.

Atributos específicos

• rows = "numero" - Cantidad de filas del textarea.
• cols = "numero" - Cantidad de columnas del textarea. Una columna es un carácter.
• Otros: name, disabled, readonly, onselect, onchange, onfocus, onblur, autofocus, required

Tipo de elemento

• En línea

En el caso de listar elementos, se puede usar la etiqueta <select> y cada ítem de la lista, se define con <option>.

<select>

Para una lista desplegable en un formulario.

Atributos específicos

• size = "numero" – Cantidad de elementos que muestran la lista (por defecto, solo muestra un elemento).
• multiple = "multiple" - Permite seleccionar más de un elemento.
• Otros: name, disabled, onchange, onfocus, onblur, autofocus, required

Tipo de elemento

• En línea

<option>

Define a cada ítem de la lista.

Atributos específicos

• selected = "selected" – Para seleccionar ítem de lista por defecto.
• Otros: label, disabled

Tipo de elemento

• En línea

Number: caja de texto que permite presentar un valor inicial el cual puede ser un incremento o decremento, según su atributo step.

<input type="number" step="1" value="10"/>

Date: para mostrar un calendario, a partir del cual se puede seleccionar una fecha.

<input type="date" value="2015-06-30"/>

Time: utilizado para mostrar datos sobre el tiempo en diferentes formatos:

<time datetime="21:00">9pm</time><br/> <time datetime="2015-09-12">12 de septiembre del 2015</time><br/> <time datetime="2015-09-12T13:30">12 de septiembre del 2015 a las 1:30pm</time>

Capítulo 1 - Páginas estáticas (Parte 05 de 09)

 5. Diseño responsive con Bootstrap

Si se desea crear una web responsive, es decir, que se ajuste automáticamente a las distintas resoluciones de pantalla de los dispositivos en los que se va a mostrar, entonces una buena alternativa es usar el framework Bootstrap.

Boostrap funciona con la base de otro frmaework llamado jQuery, por lo tanto, se tiene que hacer una configuración previa en el desarrollo de la página HTML, con las siguientes líneas:

Dentro de la sección head se colocan los estilos (CSS), en este ejemplo los Boostrap y al final de la sección body, van los javascript (JS).

Para distribuir las diversas filas (row) dentro de un contenedor (container) de Boostrap, se puede proceder de la siguiente forma, si se quiere obtener la presentación de la diapositiva:

Para entender el significado de las clases col-xs-, col-sm-, col-md- y col-lg- se muestra la siguiente tabla.

Entonces, según el ancho de la pantalla se va ajustando la presentación de los elementos dentro de row.

Esta sería la salida de la distribución en md y lg:

Esta sería la salida de la distribución en sm:

Esta sería la salida de la distribución en xs:

Imágenes, formularios y tablas responsive

Con Boostrap se puede mostrar imágenes que se ajustan al ancho de la pantalla, con esta simple sentencia:

También, se pueden personalizar las imágenes con (.img-rounded y .img-circle):

Los formularios con Boostrap son completamente responsive y cambian de forma, según el ancho de la pantalla; por ejemplo:

El mismo código respondiendo a una pantalla menos ancha:

Fragmento de código del formulario:

Si necesitan ese código es el siguiente:

<div class="container" style="padding: 40px 16px"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"> <div class="form-group"> <label for="tipoVisita">Tipo de Visita</label> <select id="tipoVisita" class="form-control"> <option value="Personal">Personal</option> <option value="Empresa">Empresa</option> <option value="Familiar">Familiar</option> </select> </div> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="input-group" style="width: 100%"> <label for="horaInicioVisita">Hora Inicio</label> <input type="text" id="horaInicioVisita" class="form-control"/> </div> </div> <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3"> <div class="input-group" style="width: 100%"> <label for="horaFinVisita">Hora Fin</label> <input type="text" id="horaFinVisita" class="form-control"/> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"><div class="input-group" style="width: 100%"> <label for="personaVisitada">Persona Visitada</label> <input type="text" id="personaVisitada" class="form-control"/> </div> </div> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="input-group" style="width: 100%"> <label for="areaVisitada">Area</label> <input type="text" id="areaVisitada" class="form-control"/> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6"> <div class="input-group" style="width: 100%"> <label for="cargoVisitada">Cargo</label> <input type="text" id="cargoVisitada" class="form-control"/> </div> </div> </div> <div class="row" style="margin-top: 16px"> <div class="col-xs-1 col-sm-2 col-md-4 col-lg-4">&nbsp;</div> <div class="col-xs-10 col-sm-8 col-md-4 col-lg-4"> <button type="button" class="btn btn-default" style="width: 100%"> <span class="glyphicon glyphicon-save" aria-hidden="true"></span> Grabar Datos </button> </div> <div class="col-xs-1 col-sm-2 col-md-4 col-lg-4">&nbsp;</div> </div> </div>

También las tablas ajustan su ancho, según la pantalla en las que son mostradas, como, por ejemplo:

Fragmento de código de la tabla:

Si necesitan el código, es el siguiente:

<div class="container" style="padding: 40px 16px"> <div class="panel panel-default"> <div class="panel-heading"> Lista de Clientes </div> <table class="table"> <thead> <tr> <th>#</th> <th>Cliente</th> <th>Correo</th> <th>Teléfono</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Juan Pérez</td> <td>jperez@hotmail.com</td> <td>999 678 456</td> </tr> <tr> <th scope="row">2</th> <td>Julia Ramos</td> <td>jramos@yahoo.es</td> <td>889 765 344</td> </tr> <tr> <th scope="row">3</th> <td>Luis Abanto</td> <td>labanto@gmail.com</td> <td>798 887 667</td> </tr> <tr> <th scope="row">4</th> <td>Carmen Valdiviezo</td> <td>cvaldiviezo@gmail.com</td> <td>998 867 667</td> </tr> </tbody> </table> </div> </div>

Capítulo 1 - Páginas estáticas (Parte 04 de 09)

 4. Diagramación de páginas

HTML5 cuenta con etiquetas que permiten la distribución de la información en la

pantalla de una forma legible. Las etiquetas que permiten realizar este diseño son las

que se muestran en el gráfico.

<header></header>: es la cabecera del documento y en ella puede llevar algún logotipo, el título de la página o quizás una descripción de la misma. No es una etiqueta obligatoria, pero se recomienda su uso, si realmente las páginas tienen algún bloque de código que se pueda entender como "cabecera".

<nav></nav>: representa a una barra de menú con opciones para navegar a diversos documentos del proyecto Web. No es obligatorio su uso, pero ayuda en la navegación del usuario si es que se usa.

<section></section>: usado para presentar información que tiene valor semántico, es decir, que aporta un significado al contenido de la página que se está mostrando.

<aside></aside>: usado para elementos complementarios, como un calendario de eventos, bloques publicitarios, enlaces externos, citas y otros.

<footer></footer>: utilizado para mostrar información al pie del documento. Esta información podría ser: comentarios sobre el copyright (derechos de autor), una política del portal, enlaces a otras páginas web relacionadas, etc.

Los elementos de seccionado HTML5 no son obligatorios para definir un esquema, aún se pueden realizar a base de “divs” y CSS.

Si desea más información sobre esta característica del lenguaje, a continuación, encontrará un enlace muy útil y completo sobre el tema: https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document

Capítulo 1 - Páginas estáticas (Parte 03 de 09)

 3. Hojas de estilo (CSS)

CSS presenta todo un conjunto de atributos para modificar la apariencia del texto, como, por ejemplo: color, font-family, font-size, font-weight, font-style y otros.

En CSS, el color se utiliza para establecer el color del texto, según el siguiente cuadro:

COLOR

Valores

• color | inherit
• Por ejemplo: #ffffff o white

Aplica a

• Todos los elementos

Valor inicial

• Según el navegador

Aunque el color del texto depende del navegador, la mayoría de estos utiliza el color negro.

Para establecer el color del texto existen varias formas:

h1 { color: #369; }

p { color: black; }

a, span { color: #b1251e; }

div { color: rgb(71, 98, 176); }

Si se quiere cambiar el tipo de letra se puede utilizar el atributo font-family. En el cuadro siguiente, se muestra un resumen:

FONT-FAMILY

Valores

• (( nombre_familia | familia_generica ) (,nombre_familia | familia_generica)* ) | inherit

Aplica a

• Todos los elementos

Valor inicial

• Según el navegador

El tipo de texto por aplicar se puede indicar de dos formas:

• Por nombre del tipo: "Arial", "Verdana", "Garamond", etc.
• Por nombre genérico del tipo de letra: Helvética, Georgia, Times, Courier y otros.

Si el desarrollador utiliza la propiedad font-family con algún valor poco común, tal vez el navegador de internet no tenga dicho tipo de texto; entonces, será reemplazado por el valor por defecto que usa el navegador. Este inconveniente es resuelto agregando más de un valor en el atributo font-family, como, por ejemplo:

font-family: Arial, Helvética, sans-serif;

font-family: "Times New Roman", Times, serif;

font-family: "Courier New", Courier, monospace;

font-family: Georgia, "Times New Roman", Times, serif;

font-family: Verdana, Arial, Helvetica, sans-serif;

También, se puede cambiar el tamaño del texto mediante el atributo font-size.

FONT-SIZE

Valores

• tamaño_absoluto | tamaño_relativo | medida | porcentaje | inherit

Se aplica a

• Todos los elementos

Valor inicial

• Médium

El tamaño es dado por un valor, pero también se puede utilizar otras expresiones para definir el tamaño. Existen 2 formas de definir el tamaño:

• Absoluto, define el tamaño mediante las siguientes palabras: xx-small, x-small, small, medium, large, x-large, xx-large.
• Relativo, define el tamaño mediante las siguientes palabras: larger, smaller; tomando como referencia el tamaño de letra del elemento padre.

CSS recomienda cambiar el tamaño del texto en unidades em o en porcentaje (%); además, se especifica el tamaño del texto en puntos (pt) cuando el documento está diseñado para imprimirse.

Después de modificarse el tipo y el tamaño de letra, es posible variar otras características como su grosor (texto en negrita) y su estilo (texto en cursiva). El atributo que controla el ancho de la letra es font-weight.

FONT-WEIGHT

Valores

• normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Se aplica a

• Todos los elementos

Valor inicial

• Normal

El valor que se usa por defecto es el normal y para los textos en negrita bold. El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700.

También, se puede definir estilo del texto con el atributo font-style.

FONT-STYLE

Valores

• normal | italic | oblique | inherit

Se aplica a

• Todos los elementos

Valor inicial

• Normal

 El siguiente es un ejemplo de estos atributos.

La información de este tema, es obtenida o basada de http://www.librosweb.es.

CSS permite mejorar la presentación de los elementos HTML y es posible definir bibliotecas de estilos que pueden ser reutilizables en otros proyectos web; por ejemplo, es posible crear la clase formal, para los tags: anchor, table, form y otros.

Entonces, esta clase formal es un conjunto de atributos CSS que se pueden reutilizar más adelante, en otros desarrollos.

La forma como se llama a una clase en un tag de HTML es a través del atributo class del tag, por ejemplo:

El primer anchor (línea 11) llama a la clase formal. El segundo anchor (línea 16) llama a la clase verde.

También, es posible generar estilos para los enlaces, como, por ejemplo:

a.normal:active, a.normal:link, a.normal:visited {
color: #444;
font-weight:bold;
text-decoration: underline;
}

 a.normal:hover {
color: #900;
font-weight:bold;
text-decoration: none;
}

Al igual que las bibliotecas para los tags anchors de HTML visto en el anterior tema, también es necesario crear las bibliotecas para tablas, de tal forma que éstas mejoren, sustancialmente, en su presentación.

En la actualidad se acostumbra a crear tablas cebradas, es decir, que las filas pares (even) tengan un color y las impares (odd) otro color; asimismo, cuando el mouse pasa sobre algunas de estas filas, ésta se ilumina indicando al cliente en qué fila se encuentra.

El tipo odd indica que la fila es impar y el tipo even que la fila es par; además, cuando el mouse pasa sobre la fila se produce el evento hover, visto en el siguiente ejemplo de bibliotecas para tablas.

Ejemplo de bibliotecas de estilos para tablas:

Capítulo 1 - Páginas estáticas (Parte 02 de 09)

 2.4 Listas

Las listas permiten ordenar información. Se tienen varios tipos, entre los que destacan los siguientes:

• Listas desordenadas con los tags <ul>, <li>

• Listas ordenadas con los tags <ol>, <li>

• Lista de definiciones con los tags <dd>, <dt>, <dd>

Combinaciones de listas y números

<ol>

    <li>Mamíferos

    <ul>

    <li> Propio de climas cálidos

    <li> De climas fríos

    </ul>

    <li> Pájaros

    <li> Reptiles

    <li> Peces

    <ul>

    <li> De agua dulce

    <ol>

    <li> De la selva

    <li> De la sierra

    </ol>

    <li> De agua salada

    <li> En agua salada y dulce

    </ul>

</ol>

2.5 Tablas

Las tablas son elementos muy importantes para la presentación de consultas y otras presentaciones de información. El tag para construir una tabla es <table>, el cual tiene elementos como las filas <tr> y las celdas <td> en las filas. A continuación, se presentan algunas etiquetas adicionales relacionadas con tablas.

Un ejemplo sencillo es el siguiente:

La salida en el navegador sería la siguiente:

El tag caption permite agregar un título a la tabla.

La propiedad colspan permite que una celda sea de varias columnas, así como, rowspan que sea de varias filas.

2.6 Enlaces

Para navegar entre los diversos documentos web, se utiliza la etiqueta <a>. El siguiente cuadro muestra algunas de sus propiedades:

Utilizado para navegar entre documentos

Atributos específicos

• name = "texto" – Etiqueta de enlace a la que se puede llegar desde otro enlace.
• href = "url" – Dirección a navegar

Tipo de elemento

• En línea

El atributo href se utiliza para indicar la URL a la que navegará el enlace, cuando el usuario hace clic sobre texto de enlace.

El siguiente ejemplo permite navegar a Google:

        <a href="http://www.google.com">Página principal de Google</a>

Otro ejemplo:

Si se tuviesen los documentos index.jsp y doc.jsp, como muestra la figura adjunta, entonces para viajar de index a doc, se tendría que poner el siguiente código en index:

        <a href=”view/doc.jsp”>Ir a doc.jsp</a>

Para viajar de doc a index, en doc se tendría que poner el siguiente código:

        <a href=” ../index.jsp”>Ir a index.jsp</a>

Se puede deducir que, para ingresar a una carpeta, se deberá poner el nombre de la carpeta seguido de slash; por ejemplo:

        <a href=”carpeta1/carpeta2/otrodoc.jsp”>..</a>

        <a href=”x/y/z/doc.jsp”>..</a>

Si se desea salir de una carpeta, se escribirá la siguiente línea:

        <a href=”../index.jsp”>..</a>

Además, si se quiere salir de una tercera carpeta interna, se escribirá la siguiente línea:

        <a href=”../../../index.jsp”>..</a>

2.7 Divisiones

En un documento HTML el elemento "div" permite crear divisiones, también llamadas secciones o zonas. Las divisiones se utilizan para agrupar elementos y aplicarles estilos.

Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no muestran nada especial cuando se crea una división, salvo que se dé formato a la división con la hoja de estilo.

La etiqueta <div> se puede anidar (es decir, que una división puede contener otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página web.

Las etiquetas “div“ y “span“ no tienen ninguna diferencia especial, solo que la primera se define como un elemento bloque y la segunda es un elemento de línea.

Esos nombres son debido a la forma en que ocupan espacio dentro del documento que se está creando. Un elemento en bloque significa que el elemento ocupa todo el ancho del documento disponible, produciendo un retorno de línea al final del mismo. Si en un documento se visualizarán los bordes alrededor del elemento, el elemento en bloque quedaría de la siguiente forma.

Capítulo 1 - Páginas estáticas (Parte 01 de 09)

1. Introducción a HTML5

HTML es un lenguaje de marcado que se interpreta en el navegador web para mostrar los sitios o aplicaciones web. Es un estándar que define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, juegos, entre otros. Es manejado por el World Wide Web Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. Se considera el lenguaje web más importante, siendo su invención crucial en la aparición, desarrollo y expansión de la World Wide Web (WWW). Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los navegadores actuales adoptan.

HTML5 es la versión actual del lenguaje de hipertexto con todas todas las mejoras necesarias para la presentación de información en celulares, tablets y PCs.

Asimismo, HTML combina opciones de Java y Flash para los efectos de animación y gráficos interactivos que se aplican en el documento a presentar. Además, estas características están contenidas en el mismo lenguaje; por lo tanto, no hay necesidad de usar complementos.

Con HTML5 se puede usar videos en forma directa y sencilla, sin necesidad de código adicional.

HTML5 se integra con JavaScript y CSS facilitando la creación de páginas interactivas con excelente presentación;para lograrlo eficientemente, cuenta con estándares para los aspectos de la web y también un propósito de cada una de las tecnologías involucradas. HTML5 presenta los elementos estructurales y CSS está concentrado en cómo volver esa estructura utilizable y atractiva a la vista; mientras que, Javascript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales.

Este lenguaje se escribe en un documento de texto, por eso solamente se necesita un editor de textos para escribir una página web. Así pues, el archivo donde está contenido el código HTML es un archivo de texto, con una peculiaridad, que tiene extensión .html o .htm (es indiferente cuál utilizar). Existe la extensión XHTML que permite validar la buena escritura de los HTML.

Puede descargar las últimas versiones de navegadores de internet de:

• www.google.com/chrome
• www.apple.com/safari/download
• www.mozilla.com
• windows.microsoft.com
• www.opera.com

El lenguaje HTML está basado en la sintaxis de XML, la cual contiene una variedad de etiquetas que permiten definir la página web con facilidad.

Etiquetas

Las etiquetas son la estructura básica de HTML;poseendos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Una etiqueta generalmente tiene un nombre de inicio (por ejemplo, <nombre-de-elemento>) y un nombre de cierre (por ejemplo, </nombre-de-elemento>). Los atributos de la etiqueta están contenidos en el elemento de inicio; y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunas etiquetas, tales como <br>, no tienen contenido,ni llevan una etiqueta de cierre.

El HTML no distingue entre mayúsculas y minúsculas, por lo que <B> sería equivalente a <b>. Lo común es que los desarrolladores escriban las etiquetas en minúscula.

Elementos estructurales

En la imagen se aprecia la estructura básica de un documento HTML. La primera línea indica el tipo de documento (HTML5), que se realiza con la etiqueta DOCTYPE.

La segunda línea (<html>) indica el inicio del documento HTML, esta etiqueta tiene su respectiva etiqueta de cierre (</html>) al final del documento.

Después, sigue la etiqueta <head> que al igual, tiene su etiqueta de cierre </head>>, estás etiquetas indican la cabecera del documento HTML. Contiene la información de la página, cosas como el título, descripción, idioma, autor, entre otras más dirigidas principalmente a los buscadores y navegadores.

Dentro de HEAD, se encuentra la etiqueta <title> y la etiqueta de cierre </title> entre estás etiquetas se escribirá el título de la página que se mostrará en el navegador (no en la página en sí).

Después, se pasa al cuerpo del documento que está delimitado por las etiquetas <body> y </body>. Dentro del cuerpo del documento es donde se va a escribir todo lo que se visualizará en el navegador al abrir la página, en este caso lo que se visualizaría es "Contenido de la web"que está dirigida a los usuarios; es donde va el contenido, donde se organiza y se muestran el texto, los colores, las imágenes y todo lo visual.

2. Etiquetas básicas

El texto para mostrar al usuario en HTML es “libre“, no se necesita ninguna etiqueta para que sea interpretado por el navegador. Usualmente, el texto se coloca dentro de algún “contenedor“ para ponerle formato o diagramación, como puede ser una división <div>, un párrafo <p>, etc.,esas etiquetas se verán más adelante en este capítulo.

Las etiquetas básicas de HTML, separadas por grupos son las que se describen a continuación.

2.1 Texto

El lenguaje HTML provee algunas etiquetas para modificar el formato del texto, directamente. Éstas no son tan utilizadas, pues se acostumbra a usar hojas de estilos (que se verá más adelante en este capítulo).

Encabezados

Son textos con un formato determinado que permiten dividir el contenido del texto en secciones. Las etiquetas van desde <H1> hasta <H6>, donde H1 es el más grande.

Párrafos

Define un párrafo en la página, que permite agrupar un texto en particular. Agrega una línea en blanco (un salto de línea) al inicio del texto.

Etiqueta <p>

Ejemplo:

<p>Todo el texto que queremos mostrar</p>

<p align= “center”>Otro bloque de texto</p>

2.2 Imágenes

Los archivos web por estándar soportan 3 tipos de archivos de imágenes:

 .gif: hasta 256 colores, pueden tener transparencia; se pueden agrupar varias imágenes en un solo archivo (movimiento).

 .jpg: hasta 16777216 colores (true color).

 .png: hasta 16777216 colores (true color), pueden tener transparencia y son editables como contenedor de objetos gráficos.

Las imágenes se cargan con el tag <img>; un ejemplo de su uso puede ser el siguiente:

<img src=“images/foto.gif“/>

Las imágenes son las que proporcionan información y complementan la información textual.

2.3 Fondo de página

El fondo de una página web puede ser un gráfico o un color, y es personalizable mediante propiedades que posee la etiqueta <body>. También se puede especificar el color del texto, de los enlaces, etc. que afectarán a toda la página.

– Propiedades principales:

— BACKGROUND = nombre del archivo gráfico a usar de fondo.

— BGCOLOR = color de fondo de la página.

— TEXT = color del texto.

— LINK = color de los enlaces

Ejemplo:

<body style="background-image: url('images/back.jpg')">