01 Material

Capítulo 1
Páginas estáticas
Objetivo
Al finalizar el capítulo, el alumno logrará:
• Crear páginas HTML5 con estilos.

• Diseñar formularios responsive.
Temas
1. Introducción a HTML5
2. HTML 5 - Etiquetas básicas
3. Hojas de Estilo CSS3
4. Bootstrap
5. Generación de Formularios
6. Etiquetas avanzadas HTML
IES Privado Cibertec S.A.C. – Java 17 Web Developer 1

Páginas estáticas
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.

Páginas estáticas
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; poseen dos 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.

Páginas estáticas
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.

Páginas estáticas
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).

Páginas estáticas
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>

Páginas estáticas
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')">

Páginas estáticas
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>
Ejemplo de listas desordenadas
<ul>
<li>Procesadores de texto
<li>Hojas de cálculo
<li>Bases de datos
<li>Graficadores
<li>Mail
</ul>
Ejemplo de listas ordenadas
<ol>
<li>América
<li>Europa
<li>Asia
<li>África
<li>Oceanía
</ol>
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>

Páginas estáticas
</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:

Páginas estáticas
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:
a Utilizado para navegar entre documentos
• name = "texto" – Etiqueta de enlace a la que se puede llegar

Atributos
desde otro enlace.
específicos
• 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.

Páginas estáticas
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.

Páginas estáticas
Ejemplo:
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.

Páginas estáticas
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 Define el color del texto

color | inherit
Valores
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); }

Páginas estáticas
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 Establece el tipo de texto

(( nombre_familia | familia_generica ) (,nombre_familia |
Valores
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 Define el tamaño del texto
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.

Páginas estáticas
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 Define el ancho del texto

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700
Valores
| 800 | 900 | inherit
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 Define el estilo del texto

Valores normal | italic | oblique | inherit
Valor inicial Normal
El siguiente es un ejemplo de estos atributos.

Páginas estáticas
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;
}

Páginas estáticas
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.

Páginas estáticas
Ejemplo de bibliotecas de estilos para tablas:

Páginas estáticas
4. 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:

Páginas estáticas
Dropdown:
Jumbotron:

Páginas estáticas
Alert:
Paneles:

Páginas estáticas
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.
Bootstrap funciona con la base de otro framework 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 Bootstrap y
al final de la sección body, van los javascript (JS).
Para distribuir las diversas filas (row) dentro de un contenedor (container) de

Bootstrap, se puede proceder de la siguiente forma, si se quiere obtener la
presentación de la diapositiva:

Páginas estáticas
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:

Páginas estáticas
Esta sería la salida de la distribución en sm:
Esta sería la salida de la distribución en xs:

Páginas estáticas
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):
.img-rounded .img-circle
Los formularios con Bootstrap son completamente responsive y cambian de forma,

según el ancho de la pantalla; por ejemplo:

Páginas estáticas
El mismo código respondiendo a una pantalla menos ancha:
Fragmento de código del formulario:
<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="input-group" style="width: 100%">
<label for="horaInicioVisita">Hora Inicio</label>
<input type="text" id="horaInicioVisita" class="form-control"/>
</div>
</div>
<label for="horaFinVisita">Hora Fin</label>
<input type="text" id="horaFinVisita" class="form-control"/>
</div>
</div>
</div>
<div class="row">

Páginas estáticas
<label for="personaVisitada">Persona Visitada</label>

<input type="text" id="personaVisitada" class="form-control"/>
</div>
</div>
</div>
<div class="row">
<label for="areaVisitada">Area</label>
<input type="text" id="areaVisitada" class="form-control"/>
</div>
</div>
<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"> </div>
<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"> </div>
</div>
</div>
También las tablas ajustan su ancho, según la pantalla en las que son mostradas,
como, por ejemplo:

Páginas estáticas
Fragmento de código de la tabla:
<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>[email protected]</td>
<td>999 678 456</td>
</tr>
<tr>
<td>Julia Ramos</td>
<td>889 765 344</td>
</tr>
<tr>
<td>Luis Abanto</td>
<td>798 887 667</td>
</tr>
<tr>
<td>Carmen Valdiviezo</td>
<td>998 867 667</td>
</tr>
</tbody>
</table>
</div>
</div>

Páginas estáticas
5. 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> Define la creación de un formulario
• 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.
Atributos
• accept = "tipo_de_contenido" - Lista separada por comas de todos los
específicos
tipos de documentos aceptados por el servidor.
• autocomplete: define el autocompletado.
• novalidate: deja de validar el formulario.
• Otros: accept-charset, onsubmit, onreset

Páginas estáticas
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> Objeto contenido en formulario
• 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
Atributos
• checked = "checked" – Marca a los checkbox y radiobutton indicando
específicos
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
En línea y etiqueta vacía
elemento

Páginas estáticas
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
Título de un conjunto de objetos del formulario agrupados con

<legend>
fieldset.
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
• for = "id_de_elemento" – Identificador de objeto al cual hace

Atributos específicos referencia.
• Otros: accesskey, onfocus y onblur
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.
• rows = "numero" - Cantidad de filas del textarea.

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

Páginas estáticas
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.
• size = "numero" – Cantidad de elementos que muestran la lista (por

Atributos defecto, solo muestra un elemento).
específicos • multiple = "multiple" - Permite seleccionar más de un elemento.
• Otros: name, disabled, onchange, onfocus, onblur, autofocus, required
<option> Define a cada ítem de la lista.
Atributos • selected = "selected" – Para seleccionar ítem de lista por defecto.

específicos • Otros: label, disabled
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"/>

Páginas estáticas
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>

Páginas estáticas
6. 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:
6.1 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>
<nav></nav>
<section></section> <aside></aside>
<footer></footer>

Páginas estáticas
<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.
6.2 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.
6.3 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.

Páginas estáticas
6.4 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.
6.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.
6.6 Local Storage
Permite generar y administrar un espacio local en el disco que puede reemplazar a las
cookies de versiones anteriores.
6.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.
6.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.
6.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.

01 Material

Cargado por

01 Material

Cargado por

Capítulo 1

Al finalizar el capítulo, el alumno logrará:

• Crear páginas HTML5 con estilos.

IES Privado Cibertec S.A.C. – Java 17 Web Developer 1

HTML es un lenguaje de marcado que se interpreta en el navegador web para mostrar

IES Privado Cibertec S.A.C. – Java 17 Web Developer 2

HTML5 se integra con JavaScript y CSS facilitando la creación de páginas interactivas

Este lenguaje se escribe en un documento de texto, por eso solamente se necesita un

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

IES Privado Cibertec S.A.C. – Java 17 Web Developer 3

En la imagen se aprecia la estructura básica de un documento HTML. La primera línea

Dentro de HEAD, se encuentra la etiqueta <title> y la etiqueta de cierre </title> entre

IES Privado Cibertec S.A.C. – Java 17 Web Developer 4

El texto para mostrar al usuario en HTML es “libre“, no se necesita ninguna etiqueta

IES Privado Cibertec S.A.C. – Java 17 Web Developer 5

IES Privado Cibertec S.A.C. – Java 17 Web Developer 6

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

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

2.3 Fondo de página

El fondo de una página web puede ser un gráfico o un color, y es personalizable

IES Privado Cibertec S.A.C. – Java 17 Web Developer 7

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

Ejemplo de listas desordenadas

Ejemplo de listas ordenadas

Combinaciones de listas y números

IES Privado Cibertec S.A.C. – Java 17 Web Developer 8

Un ejemplo sencillo es el siguiente:

IES Privado Cibertec S.A.C. – Java 17 Web Developer 9

La salida en el navegador sería la siguiente:

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

a Utilizado para navegar entre documentos

• name = "texto" – Etiqueta de enlace a la que se puede llegar

Tipo de elemento En línea

IES Privado Cibertec S.A.C. – Java 17 Web Developer 10

El siguiente ejemplo permite navegar a Google:

Si se tuviesen los documentos index.jsp y doc.jsp, como

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

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

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

En un documento HTML el elemento "div" permite crear divisiones, también llamadas

Esta etiqueta permite agrupar varios elementos de bloque (párrafos, encabezados,

IES Privado Cibertec S.A.C. – Java 17 Web Developer 11

IES Privado Cibertec S.A.C. – Java 17 Web Developer 12

3. Hojas de estilo (CSS)

Color Define el color del texto

Aplica a Todos los elementos

Valor inicial Según el navegador

Para establecer el color del texto existen varias formas:

IES Privado Cibertec S.A.C. – Java 17 Web Developer 13

Si se quiere cambiar el tipo de letra se puede utilizar el atributo font-family. En el

font-family Establece el tipo de texto

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.

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

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

font-size Define el tamaño del texto

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

• Absoluto, define el tamaño mediante las siguientes palabras: xx-small, x-small,

CSS recomienda cambiar el tamaño del texto en unidades em o en porcentaje (%);

IES Privado Cibertec S.A.C. – Java 17 Web Developer 14

Después de modificarse el tipo y el tamaño de letra, es posible variar otras

font-weight Define el ancho del texto

Se aplica a Todos los elementos

Valor inicial Normal

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

font-style Define el estilo del texto

El siguiente es un ejemplo de estos atributos.

IES Privado Cibertec S.A.C. – Java 17 Web Developer 15

CSS permite mejorar la presentación de los elementos HTML y es posible definir

a.normal:active, a.normal:link, a.normal:visited {

IES Privado Cibertec S.A.C. – Java 17 Web Developer 16

IES Privado Cibertec S.A.C. – Java 17 Web Developer 17

Ejemplo de bibliotecas de estilos para tablas:

IES Privado Cibertec S.A.C. – Java 17 Web Developer 18

IES Privado Cibertec S.A.C. – Java 17 Web Developer 19