how_to_programing_HTML_CSS_and_JAVASCRIP (2)

Prévia do material em texto

4º Semestre 
 
 
HTML5, CSS3 y JavaScript 
Desarrollo de Aplicaciones WEB 
Ing. Allan Emmanuel López Márquez 
Colegio de Estudios Científicos y Tecnológicos del Estado de México 
Índice 
 
Contenido 
HTML5 ................................................................................................................................................................. 6 
INTRODUCCIÓN A HTML5 ............................................................................................................................... 6 
PRINCIPIOS BÁSICOS EN HTML5 ...................................................................................................................... 6 
¿Qué es HTML5? ............................................................................................................................................. 7 
Etiquetas HTML: ................................................................................................................................................ 7 
ENTREMOS EN MATERIA ................................................................................................................................. 8 
Editores de Texto ............................................................................................................................................... 8 
Pasos para Construir una PÁGINA WEB ........................................................................................................... 8 
INSERTAR IMÁGENES ...................................................................................................................................... 9 
Código para insertar IMÁGENES: ...................................................................................................................... 9 
Pasos para Añadir IMÁGENES: ........................................................................................................................ 10 
VÍNCULOS ..................................................................................................................................................... 11 
Codigo para Añadir o Crear VÍNCULOS ........................................................................................................... 11 
Pasos para crear hipervínculos: ...................................................................................................................... 11 
LISTAS ........................................................................................................................................................... 12 
Codigo para crear LISTAS: ............................................................................................................................... 12 
Pasos para cobtruir una LISTA: ....................................................................................................................... 13 
TABLAS .......................................................................................................................................................... 13 
Codigo para crear TABLAS: .............................................................................................................................. 13 
Pasos para crear tablas: .................................................................................................................................. 14 
FORMULARIOS .............................................................................................................................................. 15 
Codigo para crear FORMULARIOS: ................................................................................................................. 15 
E t adas de texto TEXT INPUT ..................................................................................................................... 17 
Pasos pa a o st ui la e t ada de Texto Text I puts ................................................................................ 17 
Crear un campo PASSWORD: .......................................................................................................................... 18 
Pasos para crear campo PASSWORD: ............................................................................................................. 18 
C ea aja de texto ultili ea TEXTAREA ................................................................................................... 18 
Código pa a ea aja de texto TEXTAREA : ............................................................................................... 18 
Pasos pa a ea el TEXTAREA : .................................................................................................................... 18 
Crear una LISTA DESPLEGABLE ....................................................................................................................... 19 
Codigo para crear una LISTA DESPLEGABLE: .................................................................................................. 19 
Pasos para crear una LISTA DEPLEGABLE: ...................................................................................................... 19 
Crear CAJA DE VERIFICACIÓN ......................................................................................................................... 19 
Código para crear una CAJA DE VERIFICACIÓN: ............................................................................................. 19 
Pasos para crear una CAJA DE VERIFICACIÓN: ............................................................................................... 20 
C ea u a po de op ió BOTON DE RADIO ............................................................................................ 20 
Codigo pa a ea u ele e to de op ió o BOTON DE RADIO : .............................................................. 20 
Pasos pa a ea u ele e to de op ió o BOTON DE RADIO : ................................................................ 21 
BOTONES DE ACCION: ..................................................................................................................................... 21 
Construcción de los BOTONES: ....................................................................................................................... 21 
NUEVOS ELEMENTOS EN FORMULARIOS HTML5 .......................................................................................... 22 
Elemento datalist ............................................................................................................................................. 22 
Elemento keygen ............................................................................................................................................. 22 
Elemento meter ............................................................................................................................................... 22 
Elemento output ............................................................................................................................................. 23 
Índice 
 
Elemento Progress........................................................................................................................................... 23 
NUEVOS ATRIBUTOS ..................................................................................................................................... 24 
Atributo autofocus .......................................................................................................................................... 24 
Atributo pattern............................................................................................................................................... 24 
Atributo placeholder ....................................................................................................................................... 24 
Validación .........................................................................................................................................................el fin mas bajo de 
dicho rango.  optimum: Representa el valor óptimo para dicho elemento. 
 
Tenga en cuenta que el valor de la etiqueta meter, posteriormente lo podremos cambiar 
dinámicamente con JavaScript. 
 
Elemento output 
 
El elemento, representa el resultado de un cálculo numérico realizado a través de un script. Le 
podremos dar otros usos, cuando queramos imprimir un dato en pantalla, a modo de respuesta tras 
el evento de un usuario. 
 
1. 
2. x 
3. = 
4. 
5. 
 
Los atributos específicos de esta etiqueta son: 
  Name: asigna un nombre al elemento output.  Form: asocia este elemento con el formulario en el cual está incluido. Esto permite que 
podamos (si queremos) situar el elemento fuera del formulario asociado.  For: Indicamos una lista los IDs de los elementos que entran en el cálculo, esto establece 
una relación entre el resultado del cálculo y los elementos del mismo. 
 
Por el momento me interesa que usted vea el funcionamiento de la etiqueta, no se desespere en 
querer entrar de lleno a código y todo eso, paso a paso iremos conociendo muchas cosas que serán 
muy interesantes pero difíciles de entender sino conocemos bien las bases. 
 
Elemento Progress 
 
Elemento progress Indica que tanto de una tarea se ha completado (generalmente en términos de 
porcentaje). 
 
1. Proceso de Descarga: 
2. 
3. 
 
Desde luego posteriormente se le puede dar dinamismo a través de JavaScript. 
 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
24 
 
NUEVOS ATRIBUTOS 
Así como existen nuevas etiquetas en el formulario, en el estándar de HTML5 se especifican una 
serie de atributos que prometen facilitar en gran medida el desarrollo de formularios. 
 
Atributo autofocus 
Este atributo, se puede aplicar a cualquier elemento del formulario. El elemento que contenga este 
atributo, será enfocado automáticamente. 
Es común en la práctica que este atributo se coloque al primer elemento del formulario. Por obvias 
razones este elemento solo se debe aplicar a un solo elemento. 
 
1. 
2. Atributo "autofocus" 
3. 
4. Nombre: 
5. 
6. 
7. Email: 
8. 
9. 
10. 
11. 
 
Cuando corra el siguiente código, vera como en automático se coloca la barra del cursor sobre el 
campo que corresponde al nombre. 
 
Atributo pattern 
 
El atributo “pattern”, permite especificar un conjunto de reglas usando expresiones regulares para 
validar el ingreso de un dato. 
Cuando nosotros queremos que el usuario ingrese un dato bajo un determinado formato hacemos 
uso de este atributo para especificar la validez, de lo contrario dependiendo el navegador aparecerá 
una alerta. 
 
 
1. 
2. Atributo "pattern" Número de Telefono 
3. 
4. 
5. 
6. 
7. 
 
Como puede observar, en el código anterior, se ha empleado el atributo “title”, el cual sirve para 
indicar el tipo de dato que se desea ingresar. Ademas se puede incluir instrucciones sobre como 
colocar el dato correctamente. 
 
Atributo placeholder 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
25 
 
Este atributo sirve para colocar un valor temporal al campo de texto (input), en el momento en el que 
él usuario active el campo, el texto que colocamos desaparecerá automáticamente. 
 
1. 
2. 
3. 
 
Este atributo se puede emplear, junto con el atributo “pattern” indicar la correcta sintaxis que 
deseamos para un determinado campo. 
 
Atributo required 
 
Permite especificar un campo como obligatorio (el famoso campo con los asteriscos), de esta manera 
el formulario no podrá ser enviado hasta que el usuario complete todos los campos. 
 
1. 
 
Validación 
 
Uno de los pasos mas laboriosos a la hora de realizar un formulario, es la validación de campos con 
la finalidad de confirmar que el usuario ha ingresado los campos que deseamos y en el formato que 
lo deseamos. Para esta tarea, generalmente se hace uso e JavaScript, sin embargo la visión que 
propone HTML5, vislumbra un alivio para esta tarea, aunque aun nos enfrentamos al asunto de 
compatibilidad con algunos navegadores, este atributo promete ser de gran utilidad para los 
programadores. Para indicarle al usuario que algún campo no fue introducido de manera adecuada, 
hacemos uso de CSS para indicarle, y el navegador hará el resto. 
 
1. :invalid { 
2. background-color: red; 
3. } 
 
Cuando esté este estilo presente en nuestro sitio, cualquier campo que el navegador detecte como 
invalido le aplicará este formato. Si usted desea que este atributo no esté presente en algún campo, 
basta con colocar el atributo “novalidate” al elemento. 
 
DIFERENTES TIPOS DE INPUT “INPUT TYPES” 
La intención de estos campos es la de proveer mayor flexibilidad a los formularios. Lo que a su vez 
genera una gama bastante nutrida para la interfaz de los formularios. 
 
color 
 
Permite al usuario escoger un color, los diferentes navegadores despliegan un formato diferente para 
escoger el color, aunque el más común es la típica paleta donde se muestran las diferentes gamas 
de colores. 
 
1. 
2. Nuevos Elementos Input "color" 
3. 
4. 
5. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
26 
 
6. 
 
date 
 
Se utiliza este elemento, para pedirle al usuario que introduzca una fecha. 
En navegadores como Opera y Chrome se despliega un cuadro de texto con una flecha que permite 
desglosar un calendario, mientras que otros como Mozilla muestran un cuadro de texto básico, 
esperemos pronto se torne universal estas características. 
 
1. 
2. Nuevo Elemento Input "date" 
3. 
4. 
5. 
6. 
 
datetime 
 
El elemento “datetime” combina los elementos “date” y “time” en un solo elemento. 
 
1. 
2. Nuevo Elemento Input "datetime" 
3. 
4. 
5. 
6. 
 
En algunos navegadores se muestra un simple campo de texto, mientras que en otro se muestra un 
calendario desplegable para introducir la fecha y un campo con formato para introducir la hora. 
 
El formato oficial que recibe el elemento “datetime” es: 
 
yyyy-mm-ddThh:mm+ff:gg 
 
Donde cada caracter representa: 
  yyyy: Los cuatro dígitos del año  -: El caracter de guión, el cual debe colocarse entre año y mes, y mes y día.  mm: Los dos dígitos del mes  dd- Los dos dígitos del día  T: La letra en mayúscula “T” representa el inicio de la parte correspondiente a la hora  hh: Indica los dos dígitos de la hora en formato de 24hrs. (00:00 a 23:59)  : : El caracter de los dos puntos indica la separación entre las horas y los minutos  mm: Los dos dígitos de los minutos  +/-/Z: El ajuste de Zona Horaria se especifica mediante el uso de la letra mayúscula “Z” (esto 
si el tiempo corresponde a la zona de Zulu o GMT) o con las expresiones +/- si se trata de 
otra zona horaria.  ff: Si la zona horaria no corresponde al tiempo de Zulu, este indica el ajuste de horario de 
GMT  gg: Número de minutos que se ajustan a la zona horaria, normalmenteeste valor es de “00” 
pero es posible que se haga un ajuste de 15, 30 o 45 minutos. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
27 
 
 
Si el usuario ocupa un navegador que valida este campo, el formato tendría que ser este, ya que la 
mayoría de los programas que gestionan estos datos para procesarlos y emitir un resultado, ocupan 
esta disposición para el proceso. 
 
datetime-local 
 
El elemento “datetime-local” es igual que el anterior, solo que este no incluye un indicador para la 
zona horaria. 
 
1. 
2. Nuevo Elemento Input "datetime" 
3. 
4. 
5. 
6. 
 
email 
 
El elemento Email, generalmente se muestra como un simple campo de texto, pero su función radica 
en validar un campo correspondiente al formato de un Email. 
Aunque algunos navegadores, sobretodo los móviles indican un simbolo de “@” en el campo. 
 
1. 
2. Nuevo Elemento Input "Email" 
3. 
4. 
5. 
6. 
 
month 
 
El elemento “month”, especifica un elemento de “input” con formato de (aaaa-mm), donde 
generalmente se despliega un formato parecido al de date, aunque solo recopila estos dos datos. 
 
1. 
2. Nuevo Elemento Input "month" 
3. 
4. 
5. 
6. 
 
number 
 
El elemento “number” permite el ingreso de datos numéricos. 
Este elemento puede modificar dependiendo el navegador, donde se puede mostrar una flecha de 
despliegue, que muestre datos numéricos, al igual que en los dispositivo celulares se muestre 
solamente datos numéricos. 
 
1. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
28 
 
2. Nuevo Elemento Input "number" 
3. 
4. 
5. 
6. 
 
El elemento de “number” recibe algunos atributos extra: 
  min: Este es el valor mínimo permitido que el usuario puede introducir en el formulario, en el 
caso de la validación el formulario no admitirá un valor menor al especificado para este 
atributo.  max: Este es el valor máximo permitido y al igual que el anterior no se validará el formulario 
si hay un valor mayor que el especificado en este campo.  step: Especifica el número legal de intervalos, por defecto es “1”, pero lo puede modificar.  value: Es el valor numérico que aparecerá por defecto en el campo. 
 
range 
 
El elemento “range” permite especificar de una manera más fácil un dato numérico. 
Al igual que el elemento “number”, el elemento “range” recibe los atributos de (max, min, step y 
value). 
 
1. 
2. 
3. 
4. 
5. function actualizarOutput(){ 
6. var miRange = document.getElementById("miRange"); 
7. var miOutput = document.getElementById("miOutput"); 
8. miOutput.value = miRange.value; 
9. } 
10. 
11. 
12. 
13. 
14. Elemento Range 
15. 
16. 
17. 128 
18. 
19. 
20. 
21. 
 
Note que este código implementa un poco de JavaScript. 
Este código es independiente del elemento “range” solo que con él podemos ver en el navegador el 
valor que tiene nuestro elemento de manera numérica. 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
29 
 
search 
 
El elemento “search” se emplea para realizar algún tipo de búsqueda, por el momento este campo 
no tiene ningún comportamiento ya que esto queda a cargo de algún script. 
Recuerde que HTML5 tiene como misión el mejoramiento semántico de los elementos y destinar a 
cada parte de una página web un elemento con una acción específica y un nombre determinado, 
mas no por la función que realice dicho elemento. 
Ademas de que en algunos navegadores le proporcionan un formato definido a este elemento. 
 
1. 
2. Elemento "Search" 
3. 
4. 
5. 
6. 
 
tel 
 
El campo “tel” es usado para introducir números telefónicos. Este elemento se puede emplear junto 
con el atributo “pattern” para especificar el formato deseado del número telefónico. 
 
1. 
2. Elemento "tel" 
3. 
4. 
5. 
6. 
 
time 
 
El propósito del elemento time, es permitirle al usuario el ingreso de una hora. 
El formato de la hora será: hh:mm. 
Y como ya hemos visto anteriormente el formato en el que aparecerá este elemento sera 
especificado por el navegador. 
 
1. 
2. Elemento "tel" 
3. 
4. 
5. 
6. 
 
url 
 
El elemento “url” se emplea para introducir una dirección web. 
Los navegadores que soportan este elemento revisaran el prefijo http:// y el teclado de los 
dispositivos mostrara los elementos necesarios para escribir una direccion web como (:, /, – y el 
.com). 
 
1. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
30 
 
2. Elemento "url" 
3. 
4. 
5. 
6. 
 
week 
 
El elemento”week” se utiliza para introducir una semana del calendario y la procesa con el formato: 
 
yyyy-Wnn 
 
Donde:  yyyy: Representa los cuatro dígitos del año  -: Separa los dígitos de la semana y el año  W: Indica el comienzo de los dígitos correspondientes a la semana  nn: Representa dos dígitos correspondientes a la semana. 
 
1. 
2. Elemento "week" 
3. 
4. 
5. 
6. 
 
La mayoría de los navegadores muestran el calendario normal, pero cuando el usuario selecciona 
un día, solo los datos de año y semana son tomados por el formulario. 
 
VALIDACION DE PAGINAS WEB 
Las directrices que se describen en esta parte por lo general le darán un sitio web decente. Sería 
estupendo si tienes algún tipo de herramienta que te permita corroborar algún tipo de errores en el 
código las etiquetas que faltan y otras cosas que están fuera de orden. 
A veces usted tendrá basura como esa en el código, y ni siquiera sabrá que está en un problema. 
Puede verse bien en su navegador, pero errores como este tienen la costumbre de aparecer cuando 
estás enganchado un proyecto que muestra a cientos de personas cómo construir sitios Web. 
 
 
 
http://scriptbc.com/home/wp-content/uploads/2014/07/21.png?0a48b8
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
31 
 
Desafortunadamente, no es exactamente como un código ortográfico disponible, pero el consorcio 
W3, han proporcionado una herramienta que le permite comprobar cualquier página para ver si 
cumple con las normas que ha declarado en el tipo de documento. Esta herramienta se llama el 
validador W3, y está disponible en la siguiente dirección ingeniosamente llamado: 
http://validator.w3.org 
El validador es grande, pero no es perfecto. No se puede encontrar todos los errores, y por supuesto, 
sólo funciona cuando está conectado a Internet. Y muchas veces los mensajes error que da a veces 
son muy misterioso y no muy serviciales. 
El validador de W3 comprueba XHTML y HTML5. 
 
ETIQUETAS SEMANTICAS 
HTML5 refuerza la noción del marcado semántico. Es decir, las etiquetas no debendescribir cómo 
una sección de la página se ve, sino que deben describir el significado de la sección en el contexto 
de la página. 
 
Header 
 
La etiqueta se utiliza sobre todo para especificar un encabezado de página. Se reemplaza 
el 
 
1. 
2. Esta es mi encabezado 
3. 
 
La cabecera contiene normalmente un h1 y otra información que pertenece a la cabecera visual de 
la página. No se debe confundir el elemento (que es una sección visible de la página) con 
el elemento de (que contiene metadatos que no se muestra al usuario). También tenga en 
cuenta que el elemento no pretende sustituir el . 
La mayoría de los navegadores no ofrecen ningún tipo de formato predeterminado para la cabecera. 
Se espera que el desarrollador web pueda añadir cualquier formato a través de CSS. Se puede 
utilizar dentro de una sección o artículo para indicar que un es el título para ese elemento y no 
para la página principal. Esto es útil porque una página debe tener un solo . 
 
Nav 
 
La etiqueta se utiliza para indicar una parte de la página reservada para navegación de 
páginas. Este pretende ser un reemplazo para el … 
 
1. 
2. Menú de navegación 
3. 
4. enlace a 
5. enlace b 
6. enlace c 
7. enlace d 
8. enlace e 
9. 
10. 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
32 
 
El elemento de navegación no tiene un formato predeterminado. Se espera que el desarrollador web 
pueda añadir CSS para determinar cómo se verá el elemento y donde se colocará en la página. 
 
Section 
 
Una etiqueta es una división genérica de una página. 
Una página o un artículo que se puede dividir en varias secciones. 
El elemento de sección pretende ser más específico que las etiquetas . 
 
1. 
2. Sección 1 
3. Cuerpo de la Sección ... 
4. 
 
Article 
 
Un artículo es un subconjunto de la página. La etiqueta se debe utilizar para indicar el 
contenido que procede de una fuente exterior o es de alguna manera independiente de los 
principales contenidos de la página. Por lo general, los artículos se utilizan para marcar las secciones 
de la página que se trajeron con algún tipo de sistema de agregación. 
 
 
1. 
2. 
3. 
4. Aprendiendo HTML5 en Programando la Net 
5. 
6. 
7. 
8. Este es un párrafo de nuestro arículo, el cual usare para recordarte, que contribuyas 
en este proyecto dandole manita arriba. Gracias 
9. 
10. 
 
La mayoría de los navegadores no agregan ningún formato especial a un artículo. 
La mayoría de los artículos vinculan con un documento externo online, del cual procede dicho 
artículo. 
Note que la etiqueta no importa datos desde una fuente externa, sólo indica que la relación 
es externa. 
Vea también que si nuestro artículo contiene un , es adecuado colocarle uno que permita 
priorizar su búsqueda. 
 
Aside 
 
El elemento se utiliza para indicar un fragmento de la página que está relacionada con, pero 
separada de la página principal. Aparte del texto suele ser formateado como una barra lateral. 
Generalmente se usa para publicidad, articulos relacionados, widgets sociales etc. 
 
1. 
2. Este es un comentario secundario 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
33 
 
3. 
 
Tenga en cuenta que la mayoría de los navegadores no se han puesto de acuerdo sobre la forma 
de mostrar el elemento es totalmente a su criterio. 
 
Footer 
 
1. 
2. Este es el pie de Página 
3. 
4. Sigueme en Twitter 
5. 
6. 
 
 
 
Los navegadores no ofrecen automáticamente estilo al pie de página. El estio lo implementaremos 
con CSS. 
La etiqueta se destina principalmente para reemplazar el ID 
 
1. 
 
Adress 
 
La etiqueta está destinado a mantener la información del autor de una página o sección. 
A pesar de que estaba disponible en HTML 4, la etiqueta está destinado a ser utilizado 
en el interior o bien en todo el contenido de la página ya sea dentro de una sección o artículo para 
indicar el autor de dicha parte. Otras etiquetas (especialmente los vínculos a direcciones de correo 
electrónico o enlaces de páginas) se pueden incrustar en la etiqueta address. 
 
1. 
2. Toluca, Estado de México 
3. Calle M... Número XXX 
4. 
 
La mayoría de los navegadores muestran las direcciones como cursiva, pero esto no está 
garantizado. Al igual que las etiquetas HTML, puede modificarse con CSS. 
 
Hgroup 
 
La etiqueta se utiliza para combinar un encabezamiento y una o más subencabezados o 
subtitulos en un grupo lógico. El uso de un encabezamiento inmediato como subtitulo puede 
interferir con las funciones que describen el primero, pero con un hgroup, usted puede poner varios 
encabezados en un hgroup, y sólo el título inicial es considerado por herramientas automáticas de 
búsqueda. 
 
1. 
2. Historia del mundo 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
34 
 
3. Principales Teorías 
4. 
 
El hgroup no proporciona ningún formato particular a la cabecera de grupo. 
 
menu 
 
La etiqueta se asocia con la etiqueta , y se emplean para añadir varios sistemas 
de menús. 
 
1. 
2. 
3. 
4. 
5. 
 
 
La etiqueta “menu” soporta básicamente tres tipos de aatributos para modificar su comportamiento:  list: Presenta los comandos en forma de lista.  context: Actua como una ventana pop-up cuando el usuario hace clic con el botón derecho 
a un elemento.  toolbar: El comando se presenta como una barra de herramientas. 
Para entender el manejo de la etiqueta debemos conocer entonces los “comandos”. 
 
command 
 
Generalmente la etiqueta sse emplea en el contexto de menu, sin embargo, se puede 
emplear en cualquier parte del sitio para difinir un sistema rápido de referencia. 
 
1. 
2. 
3. 
4. 
5. 
 
La etiqueta de acepta una serie de atributos:  icon: indica la dirección de una imagen que funcionara como el icono para el comando en 
cuestión.  checked: Muestra si el comando en cuestión esta seleccionado. Esto solo tiene sentido si el 
comando representa un elemento radio o casilla de verificación.  disabled: Si este atributo está presente el comando se desactiva.  label: Muestra el text que será mostrado al usuario.  onclick: incluye una pequeña linea de JavaScript para ejecutar una función cuando el usuario 
realice clic sobre el elemento.  title: Muestra una pestaña sobre lo que el comando va a realizar.  type: Especifica el tipo de comportamiento del elemento. Esto corresponde a los mismos 
tipos de tipo para los elementos “input” (command, casilla de verificación, y radio). 
 
 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
35 
 
OTRAS ETIQUETAS DE HTML5 
DetailsEl elemento de detalles permite ocultar el contenido que se encuentre ente las etiquetas 
…. Esto permite una forma conveniente para ocultar y mostrar el contenido, 
aunque algunos navegadores pueden no soportar la etiqueta 
 
1. Este texto se muestra 
2. Este texto está oculto 
 
Summary/details 
 
Esta etiqueta trabaja en conjunto con la etiqueta para proporcionar al usuario un sumario 
visible. Cuando el usuario da clic en el sumario, todos los elementos contenidos en la etiqueta 
 que estaban ocultos, son mostrados. 
1. 
2. Identidad secreta de Batman 
3. Bruce Wayne 
4. 
 
dfn 
 
La etiqueta encierra un término que se desea definir. Rodea el término a definir entre las 
etiquetas y . 
 
1. 
2. palabra: 
3. Definición de la palabra 
4. 
 
La mayoría de los navegadores danformato a la etiqueta como cursiva, pero esto se puede 
cambiar a través de CSS. 
 
figcaption 
 
La etiqueta proporciona un título para una figura y debe estar contenido dentro de una 
etiqueta . 
 
figure 
 
Una figura es un elemento semántico que describe una o más imágenes con un título opcional. La 
etiqueta no muestra directamente las imágenes, sino que está pensado como un contenedor 
para la celebración de cualquier tipo de imagen (incluyendo la etiqueta estándar pero también 
podría incluir imágenes SVG o lienzo). La imagen se puede suministrar con un título opcional usando 
la etiqueta . 
 
1. 
2. 
3. Laguna de Apoyo, Nicaragua 
4. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
36 
 
Usted puede poner más de una imagen dentro de una figura. 
Hasta ahora, los navegadores no ofrecen un estilo o formato particular para las figuras y leyendas, 
pero estos artículos pueden modificarse a través de CSS. La etiqueta tiene la intención de trabajar 
junto con la etiqueta de para proporcionar un elemento de resumen visible para el usuario. 
Cuando el usuario hace clic en el resumen, todo el contenido en el elemento de datos, que estaba 
escondido, se vuelve disponible. 
 
time 
 
El elemento de tiempo proporciona un campo para representar una fecha u hora. Este campo 
contendrá una fecha, una hora o una fecha y una hora. 
 
1. 
2. El gallo cante en 06:30 cada mañana. 
3. 
 
Los navegadores no aplican actualmente ningún formato especial a los elementos de tiempo. Los 
datos codificados en elementos de tiempo deben tener el formato de una manera estándar para que 
puedan ser ajustados para las zonas horarias. 
 
wbr 
 
El elemento wbr se utiliza para sugerir las separaciones de palabras largas. Coloque esta etiqueta 
en el interior de una palabra larga para indicar el lugar apropiado para romper la palabra con fines 
de ajuste en línea. 
 
1. 
2. La etiqueta WBR se utiliza para marcar un espacio en una palabra larga donde sería 
apropiada romper la palabra si es necesario. 
3. 
 
AUDIO Y VIDEO 
Audio 
 
La etiqueta permite al usuario integrar un archivo de audio directamente en el navegador. 
 
1. 
2. cancion.ogg 
3. 
 
Si el navegador no soporta la etiqueta , el código entre y se presentará en 
su lugar, por lo que puede proporcionar un vínculo común para permitir al usuario descargar el audio. 
O bien, puede incrustar un reproductor Flash para navegadores antiguos. 
La etiqueta soporta varias características estándar:  Reproducción automática (autoplay): Si este atributo está presente, el archivo de audio se 
reproducirá inmediatamente cuando el navegador carga la página.En general, esta opción 
no se debe utilizar, ya que es considerado de mala educación reproducir un audio sin el 
permiso explícito del usuario.  Controles (controls): Si este atributo está presente, el navegador presenta una interfaz 
simple que incluyendo reproducir/pausa, control de volumen, y una especie de indicador de 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
37 
 
posición. Navegadores difieren en cómo aparecen exactamente los controles. Es preferible 
dar al usuario algún tipo de control ya sea a través del mecanismo de control integrado o 
código JavaScript.  Precarga (preload): Si este atributo está presente, el archivo de audio comenzará a cargar 
en la memoria tan pronto como se carga la página, pero no va a reproducirse hasta que el 
usuario activa el reproductor.  Atributo (src): Indica la dirección del archivo. Tenga en cuenta que se prefiere la etiqueta 
, ya que permite múltiples opciones de formatos. 
La mayoría de los navegadores admiten el estándar de código abierto Ogg, pero algunos 
(especialmente Safari e IE9) prefieren Mp3. Si proporciona una versión de cada uno, es posible que 
en cualquier navegador se reproduzca el audio. Utilice la etiqueta para incluir múltiples 
fuentes de audio: 
 
1. 
2. 
3. 
4. 
 
Video 
 
El elemento de vídeo es una de las características más esperadas de HTML 5. Con esta etiqueta, 
los desarrolladores serán capaces de incrustar vídeos en una página web sin necesidad de un plug-
in como Flash. 
 
1. 
2. Su navegador no admite vídeo incorporado a través de HTML5. 
3. 
 
La misma etiqueta es bastante simple de entender, pero la ejecución real es algo complejo. 
HTML5 indica una etiqueta de vídeo, pero no especifica qué formato apoyará el navegador. 
Por el momento, hay tres formatos principales de vídeo en discordia. 
 Ogg / Theora / Vorbis: 
o Ogg es un formato contenedor que se utiliza para la codificación de audio 
o Vorbis y Theora para la codificación de vídeo. 
o El sistema de Ogg está apoyado por Firefox, Chrome y Opera. (También es 
compatible con Safari si el usuario ha instalado el plug-in de QuickTime Vorbis.) IE9 
no tiene planes para apoyar este formato en absoluto. 
 MP4/H.264/AAC: 
o La norma MP4 es un formato contenedor que utiliza: 
 H.264 para la codificación de vídeo 
 AAC para la codificación de audio. 
 Los tres formatos están sujetos a restricciones de patentes. Este formato es compatible con 
Safari, Chrome, iPhone y Android. IE tiene previsto apoyar en IE9. 
 WebM/VP8/Vorbis: WebM es un estándar relativamente nuevo introducido por Google. 
 Utiliza el formato de codificación de vídeo VP8 y codificación de audio Vorbis. 
 Hay poco apoyo a WebM todavía, pero la mayoría de los navegadores están indicando 
soporte para el formato en las próximas versiones. 
 
Si desea incorporar vídeo HTML5, utilice la etiqueta para incluir los principales formatos. 
(Puede utilizar el FFmpeg herramienta gratuita disponible para las principales plataformas de 
software para convertir sus videos.) 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
38 
 
Como opción final, utilice la etiqueta dentro de su etiqueta para cargar el vídeo 
con un reproductor de Flash. Usted puede usar JavaScript para controlar el elemento de vídeo de la 
misma manera que el control de audio. 
 
CANVAS 
Elemento canvas 
 
La etiqueta establece una parte de la pantalla para gráficos de control programado. El 
código HTML simplemente deja a un lado una parte de la pantalla para ser utilizado como un lienzo. 
Todo el dibujo y la manipulación de la imagen se realizan a través de código JavaScript. 
 
1. 
2. 
3. 
4. 
5. function draw(){ 
6. var myCanvas = document.getElementById("myCanvas"); 
7. var context = myCanvas.getContext("2d");8. 
9. context.fillStyle = "blue"; 
10. context.strokeStyle = "red"; 
11. circle(context, 1, 1, 1); 
12. for (i = 1; i 
26. 
27. 
28. 
29. This example requires HTML5 canvas support 
30. 
31. 
32. click me to see a drawing 
33. 
34. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
39 
 
35. 
 
Por el momento, sólo hay un contexto de dibujo 2D, pero se preeve un contexto para dibujo en 3D 
que permitirá a los gráficos directamente en el navegador. 
El objeto “context” controla todas las funciones de dibujo actual. 
 
Éstos son algunos de los principales métodos del objeto “context”: 
 arc(): 
o El comando “arc” dibuja un arco (parte de un círculo), como parte de un camino. 
o El arco se define como un círculo, con un centro y un radio, pero con un inicio y din 
de angulo 
o Si los ángulos describen un círculo completo (de 0 a 2 x pi radianes), el comando 
“arc” dibujara un círculo completo. 
 beginPath(): 
o Este comando inicia la definición de un camino. 
o Normalmente, una ruta de acceso se define por un solo comando moveTo, seguido 
de una serie de comandos LineTo, y terminado por un strocke, closePath, o fill. 
 closePath(): 
o Este comando se conecta con el último punto de un camino a la primera, creando 
una figura cerrada que pudiera ser rellenada. 
 drawImage(): 
o El comando “drawImage”, le permite dibujar una imagen (de un archivo de de imagen 
externo) en el elemento . 
o Muchas implementaciones permiten la manipulación a nivel de píxeles, lo que 
permite aplicar filtros y transformaciones personalizadas a sus imágenes, dándole 
mucho mayor control que la etiqueta típica . 
 fill(): 
o El comando “fill” o de relleno (y sus variantes – como fillRect) permite aplicar el estilo 
de relleno a elementos dibujados en la pantalla. 
 fillRect(): 
o Este comando construye un rectángulo de un tamaño y una posición definida. 
 fillStyle(): 
o Permite especificar el estilo de relleno. Esto puede ser un valor de color estándar, o 
un gradiente predefinido. 
 lineTo(): 
o Este comando (junto con el comando moveTo) le permite construir un camino en la 
pantalla. 
o El comando lineTo toma un punto como entrada y se basa en un punto previamente 
definido en el punto actual. 
o Tenga en cuenta que la ruta de acceso no se muestra hasta que la aplicación de la 
función strocke. 
 lineWidth(): 
o Define la anchura de la línea que se está dibujado por un comando strocke. 
 moveTo: 
o Utilizado en la definición de la ruta, se utiliza el comando moveTo para indicar el 
punto de partida de un camino. 
 stroke(): 
o Este comando también traza la trayectoria definida. Tenga en cuenta que los 
caminos no son inmediatamente atraídos, el comando de trazo en realidad señala 
la ruta en la pantalla. 
 strokeRect(): 
o Este comando dibuja un rectángulo vacío. 
 strokeStyle(): 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
40 
 
o Determina el estilo del siguiente trazo en ser dibujado. La mayoría de los contextos 
de dibujo apoyan estilos de puntos y líneas discontinuas, pero se esperan aun más 
estilos. 
 text: 
o Algunas implementaciones de la etiqueta canvas permiten la manipulación de texto. 
 
La etiqueta canvas es una de las novedades más importantes de HTML5, ya que permite un control 
casi ilimitado de la interfaz visual. Los desarrolladores de juegos han comenzado a crear juegos en 
línea que utilizan el lienzo, y ya se ha convertido en la base de varios experimentos inovadores (en 
particular, los mapas de Google.) 
Para obtener más información sobre la programación del elemento canvas, visite 
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html. 
 
EMBED 
Elemento embed 
 
La etiqueta es una etiqueta universal de los elementos multimedia, por así decirlo. Se 
puede utilizar para insertar cualquier tipo de contenido multimedia en la página, especificando el tipo 
de medio que se va a mostrar. 
 
1. 
 
Esta etiqueta le permite incluir los elementos multimedia que no son compatibles con otras marcas 
de medios. 
El elemento es todavía la mejor opción para la inclusión de elementos Flash, 
especialmente en lo que una copia de seguridad de los elementos de audio o vídeo. 
 
SVG 
Elemento svg 
 
El elemento permite al autor construir una imagen en base vectorial, directamente en la página 
utilizando el lenguaje SVG. 
 
1. 
2. 
3. 
4. 
 
SVG utiliza un sistema de XML muy similar a XHTML. Cada elemento se describe por una etiqueta, 
que tiene varios atributos que definen su tamaño, posición y color. 
Los elementos SVG también pueden ser modificados por una forma de CSS. 
También es posible utilizar código JavaScript para crear y modificar el código SVG en tiempo real. 
SVG se utiliza a menudo para crear gráficos o otras visualizaciones de forma dinámica. 
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
41 
 
Además, es posible exportar una imagen SVG de una herramienta como Dia o Inkscape, e incrustar 
el dibujo resultante directamente en la página. 
La principal ventaja de un formato de imagen basado en vectores como SVG es la capacidad de 
escalar la imagen sin perder calidad. 
 
 
 
 
 
 
 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
43 
 
CSS3 
INTRODUCCIÓN A CSS3 
CSS3, trabaja describiendo ciertas partes de una página web, ya sea mediante una etiqueta, un 
identificador, clases o subclases. 
La función básica de CSS desde sus inicios, fue la aplicación de estilos a una página mediante el 
uso de reglas que posteriormente veremos. 
Comencemos con un ejemplo, y después describiremos algunas consideraciones generales en 
CSS3: 
 
Ejemplo de un sitio ocupando estilos: 
 
 
El código de nuestro ejemplo es el siguiente: 
 
1. 
2. 
3. 
4. Página Simple 
5. 
6. 
7. body{ 
8. background-color: yellow; 
9. } 
10. h1{ 
11. color: red; 
12. } 
13. p{ 
14. color: blue; 
15. background-color: white; 
16. } 
17. 
18. 
19. 
20. Página Simple con CSS3 
http://scriptbc.com/home/wp-content/uploads/2013/01/5.jpg?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
44 
 
21. El título es rojo, esto es un párrafo de color azul con fondo blanco, y el fondo, o 
cuerpo de la página, es amarillo. 
22. 
23. 
 
Los nuevos elementos que hemos ocupado no tienen nada de sorprendente, pero realmente son 
muy poderosos. Observe que hemos cambiado los colores de algunos elementos html,sin la 
necesidad de ninguna etiqueta en el body, toda la magia ocurre en la cabeza del documento. 
 
Algunas consideraciones que debe tener presente antes de añadir estilos a su documento html son: 
  Comience con un código HTML, limpio y válido. Si nuestro código no esta correctamente 
elaborado, los estilos CSS podrían responder de una manera diferente o inesperada a lo que 
usted pretende.  Existen diferentes maneras de incluir estilos a su documento. En este caso lo hicimos dentro 
del documento html, entre las etiquetas y , es por ello que para indicarle al 
navegador que nuestro fragmento de código, corresponde a estilos CSS, es necesario 
colocar dicho código entre las etiquetas y  Anteriormente, era necesario indicar el tipo de estilo mediante el argumento , pero esto ya no es necesario, debido a que el estándar de HTML5, obvia 
que cualquier tipo de estilo corresponde a CSS. 
 
Para modificar nuestros elementos html con código css: 
  Identifica la etiqueta o el elemento que deseas modificar.  Emplee las llaves {…}, para encerrar las reglas css de un determinado elemento.  Cada regla css, esta conformada por dos partes:  Atributo. Ej: background-color:  Valor. Ej: yellow  Observe que el valor y el atributo están separados por dos puntos (:).  Para finalizar la regla basta con colocar un punto y coma (;) al final de cada regla.  Recuerde que una sola etiqueta puede contener varias reglas, esto nos permitirá crear cosas 
muy interesantes mas adelante. 
 
Veamos otro ejemplo de un sitio HTML5 con reglas de CSS3: 
 
1. 
2. 
3. 
4. Estilos con CSS 
5. 
6. 
8. 
9. p { 
10. background-color: lightblue; 
11. color: blue 
12. } 
13. #identificador { 
14. background-color: black; 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
45 
 
15. color: white; 
16. } 
17. .clase { 
18. background-color: blue; 
19. color: lightblue; 
20. } 
21. 
22. 
23. 
24. Estilos con CSS 
25. 
26. Esto es un párrafo con el identificador 
27. 
28. 
29. Esto es un párrafo regular 
30. 
31. 
32. ESto es un párrafo con clase 
33. 
34. 
35. Esto es un párrafo regular 
36. 
37. 
38. Esto es otro párrafo con otra clase 
39. 
40. 
41. 
 
Note que la magia de este documento no se encuentra entre las etiquetas y , sino 
en entre y . Ubique las etiquetas y , las cuales se emplean para 
insertar código de CSS y darle estilos a nuestro documento. 
 
Del código anterior, lo que veremos en el navegador será: 
 
 
 
 
 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
46 
 
UN PEQUEÑO INSTRUCTIVO PARA AÑADIR CSS3 
  Comienza con un Documento HTML válido, de lo contrario algunos estilos podrían no 
responder como lo deseamos.  Existen diferentes formas de vincular estilos al documento, ya sea dentro de la misma 
etiqueta, dentro del y con un enlace externo, las cuales veremos posteriormente.  En el ejemplo anterior fue dentro del , y debe ser especificado mediante el uso de 
las etiquetas y  Después especificamos el elemento que deseamos modificar, el cual puede ser: una 
etiqueta, un “id” o identificador, una clase “class”, además de otros selectores mas 
específicos que posteriormente veremos.  Después abrimos enfrente del elemento a modificar las llaves de apertura y cierre { }, dentro 
de las cuales colocaremos los estilos correspondientes al elemento. La colocación y 
distribución de nuestro código es indistinto, sin embargo es recomendable que mientras 
estemos aprendiendo lo hagamos de la manera mas legible posible.  La sintaxis de la mayoría de los estilos esta determinada por: 
Estilo (atributo): formato (valor);  El estilo o atributo, especifica un conjunto de características predefinidas  El formato o valor, es la disposición que le daremos a esas características  Note que entre el atributo y el valor hay (“:” dos puntos), y al final de cada estilo un (“;” punto 
y coma).  Y otra cosa que nos va a permitir en un futuro hacer cosas muy interesantes, es que a un 
mismo elemento le podemos dar varios estilos.  Acompáñenos en este fascinante mundo del diseño y programación Web, que con las 
nuevas disposiciones y las revolucionarias tecnologías, podremos hacer cosas que creen 
una emoción y toda una experiencia en nuestros clientes o usuarios de nuestros sitios web. 
 
COLOCAR ESTILOS CON CSS3 
En este capítulo veremos las diferentes maneras para aplicar estilos CSS a los elementos de nuestra 
página. 
 
Estilos en línea o Locales 
 
Los estilos locales se aplican directamente al elemento que deseamos modificar, mediante la 
siguiente sintaxis. 
 
1. ... 
 
Esta forma de aplicar estilos es poco recomendable, ya que en un código muy elaborado seria 
imposible actualizar el contenido y el estilo de nuestro sitio. 
Por lo tanto, esta forma de implementar CSS, la dejaremos en la teoría y muy pocas veces en la 
práctica. 
 
Estilos Embebidos 
 
Esta forma de aplicar estilos, fue la empleada en el ejemplo de la lección 1, donde colocamos los 
estilos en la cabecera del documento, dentro de las etiquetas. Si bien, esta forma es mas práctica 
que en el caso de los Estilos en línea, ya que nos permite una mejor distribución entre el contenido 
y los estilos, cuando nosotros tenemos un sitio con muchas páginas que emplean los mismos CSS, 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
47 
 
tendríamos que modificar el código para cada página, por o tanto las tareas de mantenimiento se 
harían muy complicadas. 
 
1. 
2. 
3. 
4. Estilos con CSS 
5. 
6. 
7. 
8. p { 
9. background-color: lightblue; 
10. color: blue 
11. } 
12. #identificador { 
13. background-color: black; 
14. color: white; 
15. } 
16. .clase { 
17. background-color: blue; 
18. color: lightblue; 
19. } 
20. 
21. 
22. 
23. Estilos con CSS 
24. 
25. Esto es un párrafo con el identificador 
26. 
27. 
28. Esto es un párrafo regular 
29. 
30. 
31. ESto es un párrafo con clase 
32. 
33. 
34. Esto es un párrafo regular 
35. 
36. 
37. Esto es otro párrafo con otra clase 
38. 
39. 
40. 
Por lo tanto, no es recomendable el empleo de esta técnica, si nuestro sito va a ser de muchas 
páginas y tenemos que darle mantenimiento. 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
48 
 
Enlace Externo 
 
Esta es la forma más recomendable de aplicar estilos a nuestro documento. 
Y lo que tenemos que hacer es muy facil. 
1. Dentro de nuestra Directorio (lugar donde guardamos los documentos html del sitio), crear 
una carpeta llamada css. 
 
2. Dentro de dicha carpeta, que en micaso se llama css, crearemos un documento con nuestro 
editor de texto llamado estilos.css (NO olviden colocarle la extensión CSS). 
 
3. El siguiente paso, consiste en vincular nuestro documento html, el cual tiene el contenido, 
con nuestro documento css, que contiene los estilos; mediante el uso de la etiqueta 
 
 
4. La etiqueta link tiene en este caso dos atributos:  rel: ESpecifica la relacion del comumento que se va a enlazar  href: que especifica la dirección del documento css que se va a enlazar. Como 
recordaran en la Lección 3 del curso de HTML5, nos referimos a una dirección 
relativa. 
5. Esta etiqueta se coloca en la cabecera de nuestro documento html entre las etiquetas 
 y 
 
 
6. Una vez hechos todos estos pasos solo basta especificar las reglas CSS a los respectivos 
elementos del documento HTML, mediante la relación de etiquetas, identificadores, clases y 
subclases que veremos en las siguientes lecciones. 
http://scriptbc.com/home/wp-content/uploads/2014/06/image1.jpg?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/06/image2.jpg?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/06/image3.jpg?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/06/image4.jpg?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
49 
 
 
 
REFERENCIAS CON ID Y CLASS 
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada 
documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos 
mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos 
del documento que van a ser afectados. Cuando hablábamos sobre cómo incluir estilos en el 
documento, mostramos una de las técnicas utilizadas a menudo en CSS para referenciar elementos 
HTML. 
 
Existen varios métodos para seleccionar cuáles elementos HTML serán afectados por las reglas 
CSS:  Referencia por la palabra clave del elemento  Referencia por el atributo id  Referencia por el atributo class  
Mas tarde veremos que hay mucha flexibilidad para referencia elementos con su respecto CSS. 
 
Referencia por palabra clave del Elemento 
 
Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la 
misma clase en el documento. Por ejemplo, la siguiente regla cambiará los estilos de todos los 
elementos . 
1. p {font-size: 20px} 
Todos los textos envueltos en etiquetas tendrán el tamaño de 20 pixeles. 
Por supuesto, lo mismo funcionará para cualquier otro elemento HTML. Si especificamos la palabra 
clave span en lugar de p, por ejemplo, cada texto entre etiquetas tendrá un tamaño de 20 pixeles. 
¿Pero qué ocurre si solo necesitamos referenciar una etiqueta específica?, ¿Debemos usar 
nuevamente el atributo style dentro de esta etiqueta? 
  La respuesta es No. 
Como aprendimos anteriormente, el método de “Estilos en Línea” (usando el atributo style dentro de 
etiquetas HTML) es una técnica en desuso y debería ser evitada. Para seleccionar un elemento 
HTML específico desde las reglas de nuestro archivo CSS, podemos usar dos atributos diferentes: 
id y class. 
 
http://scriptbc.com/home/wp-content/uploads/2014/06/image5.jpg?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
50 
 
Referenciando con el atributo ID 
 
El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo 
no puede ser duplicado. Este nombre debe ser único en todo el documento. Para referenciar un 
elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarada 
con el símbolo # al frente del valor que usamos para identificar el elemento: 
1. #texto1 {font-size: 20px} 
 
El siguiente estilo está en un archivo css externo, o en la cabecera del documento dentro de las 
etiquetas . 
La especificación del “id” en el documento html sería: 
1. 
2. 
3. 
4. Este texto es el título del documento 
5. 
6. 
7. 
8. Mi texto 
9. 
10. 
 
El resultado de este procedimiento es que cada vez que hacemos una referencia usando el 
identificador texto1 en nuestro archivo CSS, el elemento con ese valor de id será modificado, pero 
el resto de los elementos, o cualquier otro elemento en el mismo documento, no serán afectados. 
Esta es una forma extremadamente específica de referenciar un elemento y es normalmente utilizada 
para elementos más generales, como etiquetas estructurales. El atributo id y su especificidad es de 
hecho más apropiado para referencias en Javascript. 
 
 
Referenciando con el atributo CLASS 
 
La mayoría del tiempo, en lugar de utilizar el atributo id para propósitos de estilos es mejor utilizar 
class. Este atributo es más flexible y puede ser asignado a cada elemento HTML en el documento 
que comparte un diseño similar: 
1. .texto1 { font-size: 20px } 
 
Para trabajar con el atributo class, debemos declarar la regla CSS con un punto antes del nombre. 
La ventaja de este método es que insertar el atributo class con el valor texto1 será suficiente para 
asignar estos estilos a cualquier elemento que queramos. 
 
1. 
2. 
3. 
4. Este texto es el título del documento 
5. 
6. 
7. 
8. Mi texto 
9. Mi texto 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
51 
 
10. Mi texto 
11. 
12. 
 
Los elementos en las primeras dos líneas dentro del cuerpo del código en el código anterior, tienen 
el atributo class con el valor texto1. Como dijimos previamente, la misma regla puede ser aplicada a 
diferentes elementos en el mismo documento. Por lo tanto, estos dos primeros elementos comparten 
la misma regla el último elemento conserva los estilos por defecto otorgados por el navegador. 
Existen otras formas más complejas para referenciar estilos de CSS a elementos de HTML, las 
cuales veremos mas adelante. 
 
NUEVOS SELECTORES EN CSS3 
Ahora nosotros podemos aplicar estilos específicamente a cualquier elemento que nosotros 
deseemos con CSS3. 
Anteriormente ya vimos los selectores con la etiqueta, con class y con id. 
Ahora veremos unos más específicos, que nos permiten seleccionar cualquier elemento. 
 
Selectores por atributo 
 
Imaginemos una etiqueta “input” puede asumir diferentes formas de acuerdo al atributo “type” el cual 
puede recibir diferentes valores como: (text, checkbox, radio, etc.) entonces mediante los selectores 
de atributos podemos especificar un determinado tipo de valor. 
Por ejemplo:  Si nosotros aplicáramos estilos a la etiqueta “input”, todas aquellas etiquetas input de 
diferentes tipos serán afectadas  Con el selector de atributos podemos especificar que tipo de etiquetas input seran 
modificadas 
La sintaxis sería la siguiente: 
 
1. input[type="text"]{ 
2. background-color: #CCCCFF; 
3. } 
 
Este selector se puede hacer sin el uso de la etiqueta, aunque pueden existir errores si usted ocupa 
un atributo muy general. 
 
not 
 
Pueden existir ocasiones donde usted desee realizar una selección inversa. 
Imagine que usted quiere aplicar un estilo a todos los párrafos, excepto a aquellos que no pertenecen 
a una clase específica (para este ejemplo la clase se llamará “normal”). 
 
1. p:not(.normal) { 
2. border: 1px solid red; 
3. } 
 
El estilo anterior va a darle un borde rojo a todos los párrafos, excepto a los que esten dentro de la 
clase “normal”. 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
52 
 
nth-child 
 
El selector “nth-child” permite seleccionar uno o mas elementos en un grupo. 
 
1.
2. 
3. 
4. 
5. p:nth-child(3){ 
6. background:#ff0000; 
7. } 
8. 
9. 
10. 
11. Título 
12. Primer párrafo 
13. Segundo párrafo 
14. Tercer párrafo 
15. Cuarto párrafo 
16. 
17. 
 
Este selector puede recibir formulas algebraicas para referir su valor como an+b. 
 
1. 
2. 
3. 
4. 
5. p:nth-child(2n){ 
6. background:#ff0000; 
7. } 
8. 
9. 
10. 
11. Título 
12. Primer párrafo 
13. Segundo párrafo 
14. Tercer párrafo 
15. Cuarto párrafo 
16. 
17. 
 
En el ejemplo anterior cada dos elementos será afectado por el estilo 
 
Otra fórmula similar puede ser: 
 
1. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
53 
 
2. 
3. 
4. 
5. p:nth-child(2n+1){ 
6. background:#ff0000; 
7. } 
8. 
9. 
10. 
11. Título 
12. Primer párrafo 
13. Segundo párrafo 
14. Tercer párrafo 
15. Cuarto párrafo 
16. 
17. 
 
También exsten una serie de palabras reservadas que pueden hacer referencias específicas, en 
estos casos CSS emplea las palabras even y odd, los cuales se emplean juntos para colocar colores 
alternos a una tabla grande por ejemplo. 
 
1. p:nth-child(even){ 
2. background-color: red; 
3. } 
4. 
5. p:nth-child(odd){ 
6. background-color: red; 
7. } 
 
También existen variaciones en la forma de escribir este selector: 
  : nth-last-child(N): Trabaja igual que el “:nth-child:”, excepto que la cuanta comienza del 
ultimo al primero  : nth-of-type(N): Trabaja igual que el “:nth-child:”, excepto que discrimina un tipo específico.  last-child: Este selector, afecta al último elemento  last-nth-of-type(N): Trabaja igual que el “:nth-of-type(N):” solo que la cuenta comienza del 
último al primero  first-child: Este selector, afecta al primer elemento 
 
 
¿QUE PODEMOS HACER CON CSS3? 
Desde luego que una página web hace mucho más que cambiar los colores, pero bueno por algún 
lado debemos empezar, y bien, trataremos de ir haciéndolo poco a poco. 
 
Colores Hexadecimal 
 
En cuanto los colores de una página web, podemos aplicarlos simplemente con su nombre en ingles. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
54 
 
 
 
 
Los colores hexadecimales se derivan de los colores de RGB a notación numérica en base 16, no 
nos detendremos a especificar este procedimiento, ya que en la práctica a lo único que nos tenemos 
que limitar, es a consultar una tabla de los colores hexadecimales y aplicarlos a nuestro gusto en los 
estilos de nuestro sitio web. 
Una tabla que les puede resultar muy útil para buscar los colores que desee, es la siguiente: 
 
 
 
 
 
 
 
Colores RGB y modo HSV 
 
El RGB se refiere a los colores Rojo, Verde y Azul que nos permiten realizar infinidad de 
combinaciones para crear la gran variedad de colores que existen, y ademas de la opción de 
transparencia RGBA, donde “A” especifica la transparencia, con valor de de 0 – 1, donde ceroes 
completamente transparente y uno totalmente opaco.  R – red (rojo)  G – green (verde)  B – blue (azul)  A – Alpha (para la transparencia) 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
55 
 
 
Con el uso del modelo HSV que nos permita generar contrastes muy fácilmente.  Hue (Matiz)  Saturation (Saturación)  Lightness (Luminosidad) 
 
Con esta aplicación usted podrá experimentar una gama increíblemente rica en diversidad de colores 
para implementarlos en su sitio web, solo basta añadirle un toque de creatividad para colocar el color 
correcto en el lugar correcto y crear un aspecto profesional y de buen gusto a nuestro sitio. 
 
Mas adelante veremos una serie de funcionalidades que CSS3 nos proporciona para realizar cosas 
realmente impresionantes con colores e imágenes. 
 
EDICION DE TEXTO 
Las páginas web, en su mayoría son texto, es por ello que CSS3 nos proporciona varios estilos o 
formatos que le podemos proporcionar a nuestro texto. 
No nos referimos directamente a la fuente, la cual veremos posteriormente como añadir, pero si a 
los clásicos de Negritas, Cursiva, Subrayado, entre otros. 
Veamos el siguiente ejemplo que contiene una gran variedad de estilos en un documento. 
Por fines prácticos, los estilos CSS serán embebidos dentro de las etiquetas de y , 
pero recuerde que la que nosotros debemos emplear preferentemente el enlace externo visto en la 
Lección 2 de este tutorial. 
 
1. 
2. 
3. 
4. textManipulation.html 
5. 
6. 
10. 
11. .italic { 
12. font-style: italic; 
13. } 
14. .bold { 
15. font-weight: bold; 
16. } 
17. .underline { 
18. text-decoration: underline; 
19. } 
20. .strikeThrough { 
21. text-decoration: line-through; 
22. } 
23. .center { 
24. text-align: center; 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
56 
 
25. } 
26. .right { 
27. text-align: right; 
28. } 
29. .sans { 
30. font-family: sans-serif; 
31. } 
32. .big { 
33. font-size: 200%; 
34. } 
35. 
36. 
37. 
38. 
39. Este párrafo no tiene estilo alguno 
40. 
41. 
42. Este parrafo tiene el estilo de cursivs 
43. 
44. 
45. Este párrafo tiene el formato "bold" 
46. 
47. 
48. Este párrafo tiene e estilo de subrayado. 
49. 
50. 
51. Este párrafo tiene el estilo de tachado 
52. 
53. 
54. Este párrafo esta alineado al centro 
55. 
56. 
57. Este párrafo esta alineado a la derecha 
58. 
59. 
60. Este párrfo emplea la fuente sens-serif 
61. 
62. 
63. Este párrafo tiene un formato de letra grande 
64. 
65. 
66. Este párrafo ocupa una combinación de clases 
67. 
68. 
69. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
57 
 
El código anterior nos muestra una serie de párrafos con una referencia de clases, la cual se 
relaciona a los estilos especificados dentro del y , los cuales en el código están de 
color azul. 
 
Pero preste atención al último párrafo el cual emplea una combinación de clases. 
Recuerde que cuando vimos referencias en CSS en la Lección 3, dijimos que el “id” se emplea para 
un elemento único dentro del documento y solo puede atraer los estilos de la especificación por (#id) 
en CSS, y que en el caso de “class” era mas flexible, y aquí podemos ver como a un mismo elemento, 
en este caso un párrafo , le podemos dar varios estilos, haciendo uso de diferentes clases las 
cuales están separadas por un espacio. 
 
VEAMOS COMO TRABAJAN LOS ESTILOS 
Font-style 
 
Con este atributo podemos dar estiloal texto de cursivas, en formato normal y oblicua (inclinado 
hacia atrás) 
Los valores que le podemos dar son: 
 
1. p { 
2. font-style: normal; 
3. font-style: italic; 
4. font-style: oblique; 
5. } 
 
Font-weight 
 
Con este atributo especificamos si la letra aparece en negritas o normal 
Los valores que le podemos dar son: 
 
1. p { 
2. font-weight: bold; 
3. font-weight: normal; 
4. } 
 
Text-decoration 
 
El atributo de text-decoration, generalmente se emplea para quitarle el formato predefinido a un 
vínculo con el valor de “none”, aunque también puede proporcionar otros estilos a este atributo. 
Los valores que le podemos dar son: 
 
1. p { 
2. text-decoration: underline; 
3. text-decoration: overline; 
4. text-decoration: line-through; 
5. text-decoration: none; 
6. } 
 
Text-align 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
58 
 
El atributo text-align sirve para alinear el texto o algún párrafo a la izquierda, al centro o a la derecha, 
también tiene el valor para poder justificar el texto. 
Los valores que le podemos dar son: 
 
1. p{ 
2. text-align: center; 
3. text-align: left; 
4. text-align: right; 
5. text-align: justify; 
6. } 
 
Font-family 
 
Con este atributo tenemos la posibilidad de especificar el tipo de fuente de nuestro documento. 
Para este atributo posteriormente les mostraré un vídeo de las diferentes maneras para implementar 
las fuentes. 
 
1. p{ 
2. font-family:"Times New Roman",Georgia,Serif; 
3. } 
 
Font-size 
 
Con este atributo podemos especificar el tamaño de la letra. 
Para este atributo el valor se especifica de manera numérica con diferentes unidades como (pixeles 
“px”, porcentaje “%”, o em, donde esta ultima especifica una medida en relación con la letra “m” del 
abecedario, la cual es la mas ancha de todas. 
Tambien podemos especificar los valores con medidas predefinidas como x-small, small, medium, 
larg, x-large etc. 
Las diferentes formas de especificar los valores de este atributo son: 
 
1. p{ 
2. font-size: xx-small; 
3. font-size: x-small; 
4. font-size: small; 
5. font-size: medium; 
6. font-size: large; 
7. font-size: x-large; 
8. font-size: xx-large; 
9. font-size: smaller; 
10. font-size: larger; 
11. font-size: 12px; 
12. font-size: 2em; 
13. font-size: 85%; 
14. font-size: inherit; 
15. } 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
59 
 
Bien pues hasta aquí las especificaciones para los estilos aplicados a textos, por el momento ustedes 
practiquen aplicando diferentes valores a los estilos y aplíquelos uno por uno, experimente diferentes 
combinaciones hasta que se sienta cómodo al emplear estos elementos. 
 
ATRIBUTO BORDER 
En CSS, es posible dar un borde a los elementos, el cual puede tener diferentes combinaciones de 
estilos. 
Donde su sintaxis especifica el grosor del borde, seguido del tipo o estilo de borde y finalmente el 
color del borde. 
Veamos el siguiente ejemplo: 
 
1. 
2. 
3. 
4. 
5. #solid{ 
6. border: 5px solid blue; 
7. } 
8. #double{ 
9. border: 5px double green; 
10. } 
11. #groove{ 
12. border: 5px groove yellow; 
13. } 
14. #ridge{ 
15. border: 5px ridge red; 
16. } 
17. #inset{ 
18. border: 5px inset purple; 
19. } 
20. #outset{ 
21. border: 5px outset blue; 
22. } 
23. #dashed{ 
24. border: 5px dashed green; 
25. } 
26. #dotted{ 
27. border: 5px dotted red; 
28. } 
29. 
30. 
31. 
32. Estilo de borde solid 
33. Estilo de borde double 
34. Estilo de borde groove 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
60 
 
35. Estilo de borde ridge 
36. Estilo de borde inset 
37. Estilo de borde outset 
38. Estilo de borde dashed 
39. Estilo de borde dotted 
40. 
41. 
 
Lo que veremos en el navegador será: 
 
Existen otros estilos que incluyen el nombre de border, pero los veremos mas tarde, ya que estos 
conforman parte de los nuevos estándares de CSS3 
Otra cosa que también podemos realizar, es colocar solo el trazo correspondiente a un borde 
especificado, es decir, no dibujar el contorno completo del borde sino solo una linea, dos o tres. Esto 
se logra de la siguiente manera:  Para colocar el borde superior de un elemento la sintaxis sería: 
border- top: 5px solid red;  Para especificar el borde inferior de un elemento, la sintaxis sería: 
border-bottom: 5px solid red;  Para especificar el borde derecho o izquierdo de un elemento, la sintaxis sería: 
border-right/left: 5px solid red; 
 
 
BACKGROUND 
El atributo background, nos permite colocar a toda la pantalla o alguna sección delimitada por algún 
elemento un fondo, sea este un color o una imagen. 
A continuación realizaremos un pequeño ejemplo donde insertemos una imagen de fondo y 
coloquemos a un elemento y un fondo de color. 
 
Lo que veremos en el navegador será: 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
61 
 
 
Paso a Paso 
 
Crearemos una página simple con un código como el siguiente: 
 
1. 
2. 
3. 
4. 
5. 
6. Usando el Atributo Background 
7. Este es un párrafo con un background de color. 
8. 
9. 
 
Ahora usaremos la etiqueta dentro de las etiquetas y emplearemos el atributo 
background-image y background-color. 
 
1. 
2. 
3. 
4. 
5. body{ 
6. background-image: url(img/destellos.png); 
7. } 
8. h1{ 
9. background-color: rgb(154,227,200); 
10. } 
11. p{ 
12. background-color: #26FF00; 
13. } 
14. 
15. 
16. 
17. Usando el Atributo Background 
18. Este es un párrafo con un background de color. 
19. 
20. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
62 
 
 
 En este ejemplo, la imagen que usamos emplea la extensión .png sin embargo recuerde que 
podemos ocupar las imágenes con la extensión (.jpg o .gif) 
 Para emplear la imagen, cree una carpeta llamada img dentro del directorio de nuestra 
página y en ella guarde una imagen con el nombre “destellos.png”, esto claro, con fines de 
este ejemplo. 
 Después, dentro de las etiquetas de estilo, realice una referencia para el elemento body y 
emplee el atributo background-image tal como esta en el ejemplo. 
 Después emplee el elemento url() 
 Dentro de los paracentesis colocamos el vinculo sea, absoluto o relativo, de la dirección de 
la imagen. 
 Para los elementos y emplearemos el atributo background-color tal como fue 
empleado en el ejemplo 
 Note que el elemento ocupa la notación de color rgb(), mientras que el elemento 
ocupa la notación hexadecimal. Consulte la Lección 4 del curso de CSS3. 
 Podemos emplear otros propiedades para el background tales como: 
o background-size 
o background-origin 
o background-clip 
o background-position 
o background-attachment 
o background-repeat 
 Debe de tener en consideración el fondo que elija para su página: 
 Que a imagen tenga relación con su contenido 
 Que no se pierdan las letras entre el color del fondo y el color del texto 
 Conservar el buen gusto 
 
POSICION FLOAT 
La posición flotante o float-position, funciona mediante la relación que existe entre los elementosde 
una página, en lugar de definir una ubicación específica. 
Esto puede resultar un poco difícil de entender al inicio, pero una vez que domine la posición flotante 
será capaz de diseñar la ubicación de los elementos de toda una página web. 
Ahora diseñamos un pequeño formulario sobre el cual emplearemos la posicion flotante; por el 
momento el código de nuestro formulario será: 
 
1. 
2. 
3. 
4. Formulario 
5. 
6. 
7. 
8. 
9. 
10. Nombre 
11. 
12. Dirección 
13. 
14. Teléfono 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
63 
 
15. 
16. 
17. Enviar 
18. 
19. 
20. 
21. 
22. 
 
Antes de trabajar con el atributo FLOAT, revisemos unas pocas cosas sobre el formulario 
anteriormente visto. 
 El formulario tiene un recipiente fieldset. La mayoría de los elementos del formulario son 
elementos en línea por lo tanto el formulario se mostrará de la siguiente manera 
 
  En la práctica común nosotros queremos hacer que la disposición de un formulario sea en 
forma de una tabla, sin embargo las buenas prácticas nos indican no utilizar las tablas como 
tal, por lo tanto debemos ocupar las reglas que CSS nos proporciona para crear esta 
disposición. 
 
Para entender como crear una disposición de tabla a nuestro formulario, debemos entender como 
manejan las vistas los navegadores. 
 
Para esto existen tres maneras de tratar las disposiciones de los elementos en un navegador. 
 
1. INLINE: Coloca el texto tal cual los implementamos en el código sin saltos de linea o 
cambios. 
2. BLOCK: Los elementos cobran independencia y se colocan en su propia linea, es decir uno 
debajo del otro. 
3. ALTERNATIVE: Especifica una disposición distinta de los elementos, el elemento float es un 
ejemplo de ello. 
 
 
 
Disposición en bloque “block” 
Conociendo estas disposiciones, veremos como aplicar a nuestro formulario del ejemplo anterior una 
vista así: 
 
 
http://scriptbc.com/home/wp-content/uploads/2014/08/1.jpg?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/08/2.jpg?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
64 
 
 
Para esto simple basta colocar una disposición en bloque a los elementos input y button y nuestro 
código quedará de la siguiente manera. 
 
1. 
2. 
3. 
4. Formulario 
5. 
6. 
7. input { 
8. display: block; 
9. } 
10. button { 
11. display: block; 
12. } 
13. 
14. 
15. 
16. 
17. 
18. Nombre 
19. 
20. Dirección 
21. 
22. Teléfono 
23. 
24. 
25. Enviar 
26. 
27. 
28. 
29. 
30. 
 
Vista en dos columnas usando “float” 
 
El atributo “float” nos permite remover la disposición normal de un elemento y aplicarle una posición 
flotante diferente. 
El atributo “float” describe la relación entre un elemento y sus vecinos 
Veamos un ejemplo: 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
65 
 
 
Para este ejemplo, debemos sustituir los estilos del código anterior por estos: 
 
1. 
2. label { 
3. float: left; 
4. width: 30%; 
5. } 
6. input { 
7. display: block; 
8. } 
9. button { 
10. display: block; 
11. } 
12. 
 
En este ejemplo mandamos los elementos “label” a la izquierda y les damos un tamaño de 30% 
respecto al tamaño de la página. 
Al darle un ancho de 30% a los elementos label y un “display: block” a los elementos input, hacemos 
que los elementos input se posicionan en la derecha. 
 
En la imagen de arriba veremos en el recuadro azul el elemento label, correspondiente al estilo “float” 
y en el recuadro naranja veremos el elemento correspondiente al estilo en bloque, el cual ocupa el 
espacio restante del lado derecho, es decir, el 70% restante y al no haber mas espacio, el siguiente 
elemento label se posiciona debajo y así sucesivamente. 
 
PROPIEDAD MARGIN 
En la lección anterior vimos como manipular la posición de un formulario haciendo uso del atributo 
float, a continuación veremos una serie de atributos que nos ayudaran a darle mas formatos de 
disposición a nuestro formulario. 
 
En esta lección veremos la propiedad margin. 
El margen despeja un área alrededor de un elemento (fuera de este). El margen no tiene un color de 
fondo, y es completamente transparente. 
 
http://scriptbc.com/home/wp-content/uploads/2014/08/3.jpg?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/08/4.jpg?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
66 
 
La propiedad margin puede recibir diferentes valores: 
 auto: el navegador calcula el margen automáticamente 
 dimensiones: puede ser en pixeles, pulgadas o porcentajes. 
 
Podemos especificar los margenes de manera individual de la siguiente manera: 
 
1. margin-top:100px; 
2. margin-bottom:100px; 
3. margin-right:50px; 
4. margin-left:50px; 
 
O podemos hacerlo de manera abreviada, de las siguientes maneras. 
 
 margin: 25px 50px 75px 100px; 
o margin superior es 25px 
o margin derecho es 50px 
o margin inferior es de 75px 
o margin izquierdo es de 100px 
 margin: 25px 50px 75px 
o margin superior es 25px 
o los márgenes derecho e izquierdo son 50px 
o margin inferior es de 75px 
 margin: 50px 25px; 
o márgenes superior e inferior son 25px 
o los márgenes derecho e izquierdo son 50px 
 margin: 25px; 
o todos los cuatro márgenes son 25px 
 
Ahora aplicaremos estilos a nuestro ejemplo del formulario: 
 
1. 
2. 
3. 
4. Formulario 
5. 
6. 
7. fieldset { 
8. width: 80%; 
9. margin: auto; 
10. } 
11. form{ 
12. width: 30%; 
13. } 
14. label { 
15. float: left; 
16. width: 30%; 
17. margin-left: 15%; 
18. } 
19. input { 
20. display: block; 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
67 
 
21. } 
22. button { 
23. display: block; 
24. margin: auto; 
25. } 
26. 
27. 
28. 
29. 
30. 
31. Nombre 
32. 
33. Dirección 
34. 
35. Teléfono 
36. 
37. 
38. Enviar 
39. 
40. 
41. 
42. 
43. 
 
En el formulario anterior aplicamos un margen con un valor auto, el cual le permite al navegador 
ajustar un margen predefinido. 
Después le colocamos un margen izquierdo a los elementos label, lo cual lo separa del borde del 
“fieldset”. 
Y también le colocamos un margen con valor auto al elemento button. 
Desde luego usted puede implementar diferentes formas para el margen, sin embargo el objetivo de 
este tutorial es que usted vea el uso de la propiedad margin. 
 
PROPIEDAD PADDING 
Las propiedades de padding CSS definen el espacio entre el borde del elemento y el contenido del 
elemento. 
El padding crea un área alrededor de los contenidos (en el interior25 
DIFERENTE“ TIPO“ DE INPUT INPUT TYPE“ ................................................................................................ 25 
color ................................................................................................................................................................. 25 
date .................................................................................................................................................................. 26 
datetime ........................................................................................................................................................... 26 
datetime-local .................................................................................................................................................. 27 
email ................................................................................................................................................................. 27 
month ............................................................................................................................................................... 27 
number ............................................................................................................................................................. 27 
range ................................................................................................................................................................ 28 
search ............................................................................................................................................................... 29 
tel ...................................................................................................................................................................... 29 
time .................................................................................................................................................................. 29 
url ..................................................................................................................................................................... 29 
week ................................................................................................................................................................. 30 
VALIDACION DE PAGINAS WEB ..................................................................................................................... 30 
ETIQUETAS SEMANTICAS .............................................................................................................................. 31 
Header .............................................................................................................................................................. 31 
Nav ................................................................................................................................................................... 31 
Section .............................................................................................................................................................. 32 
Article ............................................................................................................................................................... 32 
Aside ................................................................................................................................................................. 32 
Footer ............................................................................................................................................................... 33 
Adress ............................................................................................................................................................... 33 
Hgroup ............................................................................................................................................................. 33 
menu ................................................................................................................................................................ 34 
command ......................................................................................................................................................... 34 
OTRAS ETIQUETAS DE HTML5 ....................................................................................................................... 35 
Details ............................................................................................................................................................... 35 
Summary/details.............................................................................................................................................. 35 
dfn .................................................................................................................................................................... 35 
figcaption ......................................................................................................................................................... 35 
figure ................................................................................................................................................................ 35 
time .................................................................................................................................................................. 36 
wbr ................................................................................................................................................................... 36 
AUDIO Y VIDEO ............................................................................................................................................. 36 
Audio ................................................................................................................................................................ 36 
Video ................................................................................................................................................................ 37 
CANVAS......................................................................................................................................................... 38 
Elemento canvas .............................................................................................................................................. 38 
EMBED .......................................................................................................................................................... 40 
Elemento embed ............................................................................................................................................. 40 
SVG ............................................................................................................................................................... 40 
Índice 
 
Elemento svg.................................................................................................................................................... 40 
CSS3 .................................................................................................................................................................. 43 
INTRODUCCIÓN A CSS3 ................................................................................................................................. 43 
UN PEQUEÑO INSTRUCTIVO PARA AÑADIR CSS3 ........................................................................................... 46 
COLOCAR ESTILOS CON CSS3 ........................................................................................................................ 46 
Estilos en línea o Locales ................................................................................................................................. 46 
Estilos Embebidosdel elemento). El padding se ve 
afectado por el color de fondo del elemento. 
Esta propiedad nos permite alejar los elementos del borde que los contiene. 
Como vimos en el caso de margin podemos especificar el padding con el valor auto, el cual nos 
ajusta el contenido con la configuración predefinida del navegador de manera abreviada o 
especificando cada padding individualmente. 
 
En CSS, es posible especificar diferentes tipos de pading para diferentes lados: 
 
1. padding-top: 25px;/*Establece el padding superior*/ 
2. padding-bottom: 25px;/*Establece el padding Inferior*/ 
3. padding-right: 50px;/*Establece el padding Derecho*/ 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
68 
 
4. padding-left: 50px;/*Establece el padding Derecho*/ 
 
Para acortar el código, es posible especificar todas las propiedades de padding en una propiedad. 
Esto se llama una propiedad abreviada. 
 
 padding:25px 50px 30px 50px; 
La propiedad de relleno puede tener de uno a cuatro valores. 
 
 padding: 25px 50px 75px 100px; 
o relleno superior es 25px 
o relleno derecho es 50px 
o relleno de fondo es 75px 
o margen izquierdo es 100px 
 padding: 25px 50px 75px; 
o relleno superior es 25px 
o rellenos derecha e izquierda son 50px 
o relleno de fondo es 75px 
 padding: 25px 50px; 
o rellenos superior e inferior son 25px 
o rellenos derecha e izquierda son 50px 
 padding: 25px; 
o los cuatro rellenos son 25px 
 
Apliquemos el padding a nuestro ejercicio de del formulario que traemos desde las lecciones 
anteriores. 
 
1. 
2. 
3. 
4. Formulario 
5. 
6. 
7. fieldset { 
8. width: 80%; 
9. margin: auto; 
10. } 
11. form{ 
12. width: 30%; 
13. } 
14. label { 
15. float: left; 
16. width: 30%; 
17. margin-left: 15%; 
18. padding-right: 1em; 
19. } 
20. input { 
21. display: block; 
22. } 
23. button { 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
69 
 
24. display: block; 
25. margin: auto; 
26. } 
27. 
28. 
29. 
30. 
31. 
32. Nombre 
33. 
34. Dirección 
35. 
36. Teléfono 
37. 
38. 
39. Enviar 
40. 
41. 
42. 
43. 
44. 
 
Bien note en azul el pequeño código que fue añadido. 
Copie el código en su editor de texto y corralo en su navegador y vea el cambio con la propiedad 
padding y sin la propiedad para que note la diferencia. 
Experimente colocando el padding en diferentes lugares para que note los cambios. 
En este ejemplo ocupamos la unidad de medida “em”, la cual representa la unidad previamente 
especificada, por defecto en la mayoría de los navegadores sería 16px; Bajo esta medida: 
 1em – 16px 
 2em – 32px 
TEXT-ALIGN 
La propiedad text-align especifica la alineación horizontal del texto de un elemento. 
 
Los valores que puede asumir esta propiedad serán: 
 
1. text-align: center; 
2. text-align: justify; 
3. text-align: right; 
4. text-align: left; 
 
Este atributo nos permite ajustar los ya conocidos: centrado, justificado, alineado a la derecha o 
alineado a la izquierda, este último es el que los navegadores tienen por defecto. 
 
Veamos esta propiedad en práctica dentro de nuestro código del ejemplo del formulario: 
 
1. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
70 
 
2. 
3. 
4. Formulario 
5. 
6. 
7. fieldset { 
8. width: 80%; 
9. margin: auto; 
10. } 
11. form{ 
12. width: 30%; 
13. } 
14. label { 
15. float: left; 
16. width: 30%; 
17. margin-left: 15%; 
18. padding-right: 1em; 
19. text-align: right; 
20. } 
21. input { 
22. display: block; 
23. } 
24. button { 
25. display: block; 
26. margin: auto; 
27. } 
28. 
29. 
30. 
31. 
32. 
33. Nombre 
34. 
35. Dirección 
36. 
37. Teléfono 
38. 
39. 
40. Enviar 
41. 
42. 
43. 
44. 
45. 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
71 
 
Recuerde que usted debe de experimentar todas las opciones posibles, para que se familiarice con 
esta propiedad. 
 
POSICION ABSOLUTA 
CSS permite diferentes maneras de posicionar un elemento, como los anteriormente vistos de 
margin, padding, text-align, float, etc. y otro es la posición absoluta. 
 
La posición absoluta nos permite desprender de las propiedades de inline/block a nuestros 
elementos y colocarlos en la posición que nosotros queramos. 
 
Aunque no es recomendable para establecer la vista de una página, generalmente se emplea esta 
propiedad junto con JS par realizar una determinada animación o movimiento de un determinado 
elemento. 
 
Veamos un ejemplo con el siguiente código HTML y CSS. 
 
1. 
2. 
3. 
4. absolute.html 
5. 
6. 
7. #bug { 
8. position: absolute; 
9. left: 100px; 
10. top: 50px; 
11. } 
12. 
13. 
14. 
15. Absolute Positioning Example 
16. 
17. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
18. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
19. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
20. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
21. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
22. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
23. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
72 
 
24. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
25. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
26. Esta página está invadida por un insecto!!!!!!!Esta página está invadida por un 
insecto!!!!!!!Esta página está invadida por un insecto!!!!!!! 
27. 
28. 
29. 
30. 
31. 
32. 
 
El CSS cambia el comportamiento del elemento “bug” en 4 formas importantes: 
 
 Al atributo “position” se le asigno el valor “absolute”: Esto significa que los mecanismos para 
mostrar la vista serán reescritos por la posición previamente especificada. 
 Al atributo “left”se le asigno un valor de 100px: Una vez que hemos asignado el atributo 
absoluto a un elemento, debemos especificar, (preferentemente en pixeles), en que posición 
deseamos colocarla, en el caso de “left” le indicamos cuantos pixeles queremos que se 
mueva hacia la izquierda. 
 Al atributo “top” se le asigna un valor de 50 px: Esto indica de cuanto será el margen en la 
parte superior del elemento. En este caso nuestra referencia es la esquina superior 
izquierda, y nuestras coordenadas serían (100, 50). 
 El elemento ignora las reglas previamente establecidas: Es por ello que se superpone a los 
elementos posteriores, esto puede resultar un problema en el diseño web en ocasiones, pero 
para su uso en animaciones suele ser muy útil. 
 
 
PSEUDO-CLASES 
Hover: 
Las pseudo-clases se utilizan para añadir efectos especiales a algunos selectores. Este se activa 
cuando el cursor del mouse pasa sobre el elemento con la pseudo-clase “hover”. 
 
Tenga presente que los dispositivos móviles pueden tener un trato diferente con respecto a esta 
propiedad. 
 
1. 
2. 
3. 
4. 
5. a:hover{ 
6. background-color:yellow; 
7. } 
8. 
9. 
10. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
73 
 
11. 
12. C&oacutte;digo Acci&oacutte;n 
13. 
14. PsicoCiencia BC 
15. 
16. 
17. 
 
 
Focus: 
Esta pseudo-clase se activa cuando un elemento de tipo “input” está a punto de recibir información. 
 
1. 
2. 
3. 
4. 
5. input:focus{ 
6. background-color:yellow; 
7. } 
8. 
9. 
10. 
11. 
12. Nombre: 
13. Apellido: 
14. 
15. 
16. 
 
 
Active: 
Los estilos se aplicaran al elemento de un formulario que se encuentre activo, es decir al que se esté 
ocupando. 
 
1. 
2. 
3. 
4. 
5. a:active{ 
6. background-color:yellow; 
7. } 
8. 
9. 
10. 
11. C&oacutte;digo Acci&oacutte;n 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
74 
 
12. PsicoCiencia BC 
13. 
14. 
 
 
NUEVOS SELECTORES 
Para aplicar un estilo a un determinado elemento, debemos seleccionarlo de una manera precisa 
para asegurarnos de que el navegador no muestre resultados inesperados, anteriormente en este 
mismo curso ya habíamos visto los selectores por tag name (nombre de la etiqueta), por class y por 
id. 
Sin embargo esto no suele ser suficiente, y es por ello que al estándar de CSS3 se le han añadido 
unas formas nuevas de seleccionar los elementos de un documento HTML. Veamos cuales son: 
 
Selector por atributo: 
 
Ahora usted puede aplicarle estilos a un elemento que contenga un atributo determinado. Por 
ejemplo, el elemento input puede adoptar diferentes normas de acuerdo a lo especificado en su 
atributo type=””. Usando la nueva sintaxis de CSS3, es posible aplicarle estilos únicamente a los 
elementos input de un tipo específico. Veamos un ejemplo de la sintaxis: 
 
1. input[type="text"]{ 
2. background-color: #CCCFFF; 
3. } 
 
De esta manera, todos los elementos input con el atributo type=”text”, tendrán un color de fondo 
#CCCCFF. 
 
Not: 
Existen ocasiones en las que se desea una selección a la inversa. Por ejemplo, imagine que desea 
especificarle un determinado estilo a todos los párrafos que no pertenecen a una determinada clase: 
 
1. p:not(.box){ 
2. border: 1px solid red; 
3. } 
 
De esta manera se le aplicaran los estilos {border: 1px solid red;} a todos los párrafos, excepto 
aquellos que contengan la clase box. 
 
Nth-child: 
El selector nth-child te permite seleccionar uno o mas elementos en un grupo, en su versión básica 
se emplea un índice para indicar que elemento deseamos modificar. 
 
1. #miLista>li:nth-child(1){ 
2. border: 1px solid blue 
3. } 
 
Esto permite colocarle estilos al primer elemento de un grupo o conjunto. En este caso se le ha 
aplicado un borde al primer elemento de una lista, es decir, a la primera etiqueta . 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
75 
 
Incluso, el indice que recibe el selector, puede ser una formula, como por ejemplo, aplicar estilos 
distintos a los elementos pares y a los elementos nones: 
 
1. #miLista>li:nth-child(2n){ 
2. border: 1px solid blue; 
3. } 
 
Y para imapres seria: 
 
1. #miLista>li:nth-child(2n+1){ 
2. border: 1px solid red; 
3. } 
 
Este mismo mecanismo ya esta pensado en CSS3, y para colocarle estilos distintos a los elementos 
pares e impares, existen las palabras clave, “even” y “odd” respectivamente, que se colocan en vez 
del índice: 
 
1. #miLista>li:nth-child(even){ 
2. background: blue; 
3. } 
 
Y para impares seria: 
 
1. #miLista>li:nth-child(odd){ 
2. background: red; 
3. } 
 
Existen otras variantes para el selector nth-child: 
 
 :nth-last-child(N): Trabaja exactamente igual que nth-child, la unica diferencia es que 
comienza a contar a partir del último elemento del grupo. 
 :nth-of-type(N): Trabaja como nth-child; solo que solo afecta a los elementos de un 
determinado tipo, y los demás son ignorados. 
 last-child: Selecciona el último elemento de un grupo. Muy eficiente en el caso de listas 
dinámicas donde el último elemento va cambiando. 
 last-nth-of-type(N): Trabaja como nth-child; pero comienza desde el final del grupo 
 first-child: Selecciona el primer elemento. 
 
Actualmente estos selectores son soportados por todos los navegadores modernos, y a partir de IE9, 
ya se pueden emplear. 
 
COLUMNAS 
Desde simple, los desarrolladores web, han buscado la manera de dar formato y diseño atractivo a 
sus sitios mediante el uso de frames, tablas, elementos flotantes “float”, y finalmente CSS3 trae para 
nosotros un soporte para solucionar esto, mediante la implementación de columnas. 
Veamos y analicemos el siguiente código para ver como funciona. 
 
1. #main{ 
2. column-count: 3; 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
76 
 
3. column-gap: 2em; 
4. column-rule: 5px double red; 
5. -webkit-column-count: 3; 
6. -webkit-column-gap: 2em; 
7. -webkit-column-rule: 5px double red; 
8. -moz-column-count: 3; 
9. -moz-column-gap: 2em; 
10. -moz-column-rule: 5px double red; 
11. } // end main 
 
Las tres características determinan o siguiente: 
 
 column-count: indica el número de columnas. 
 column-gap: El espacio entre columnas utilizando estándar CSS mediciones. 
 column-rule: La línea vertical (si los hay) entre las columnas. Esta regla es definida con 
exactamente los mismos parámetros que la norma frontera. 
 
Existen algunas limitaciones y/o variaciones de navegador a navegador. 
Tampoco se puede hacer que una columna sea de un tamaño diferente a las demás, ya que esto se 
determina de manera automática, de acuerdo al ancho del dispositivo. 
Emplear columnas para el diseño de nuestro sitio es tentador, sin embargo, el modelo de caja es 
más aconsejable. 
Las columnas son más adecuadas para el diseño de estilo revista con el texto que fluye entre 
columnas. 
TEXT-STROKE 
Con CSS3, usted puede cambiar la apariencia de las fuentes de otra manera. 
Usted puede especificar un color de trazo para el texto. Esto define un contorno alrededor de la letra. 
Puede especificar el color del trazo (usando cualquiera de los colores estándares de CSS). También 
puede cambiar el ancho de trazo (usando el atributo size). 
Veael siguiente ejemplo: 
1. h2 { 
2. color: yellow; 
3. -webkit-text-stroke: 2px red; 
4. font-size: 300%; 
5. } 
 
Algunos navegadores no soportan el estilo de text-stroke, por eso conviene especificarlo con el 
soporte de -webkit-. 
 
TEXT-SHADOW 
Shadows, o sombras, son otro estilo común en los nuevos diseños de páginas web. 
Las sombras añaden un efecto de profundidad a una página, pero también pueden mejorar la 
legibilidad (si se utiliza correctamente) para levantar el título de la página. 
El atributo text-shadow era técnicamente parte de CSS2, pero recientemente ha sido soportado por 
la mayoría de los navegadores. 
 
Para declararlo, se hace de la siguiente manera: 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
77 
 
1. h2 { 
2. font-size: 300%; 
3. text-shadow: 3px 3px 5px #666666; 
4. } 
 
El estilo text-shadow recibe cuatro argumentos: 
 
 offset-x: 
o Determina hasta qué punto en el eje x se desplaza la sombra, sobre el texto original. 
o Un valor positivo mueve la sombra a la derecha, y un valor negativo mueve a la 
izquierda. 
o offset-y: 
o Indica hasta qué punto en el eje Y (arriba-abajo), se desplazara la sombra desde el 
texto original. 
o Un valor positivo mueve la sombra hacia abajo, y un negativo valor mueve la sombra 
hasta 
 blur: 
o Especifica el radio de desenfoque de la sombra. 
o Si el valor es 0px, no hay falta de definición, y la sombra se ve como el texto original. 
o En general, usted querrá el desenfoque equivalente al largo de sus 
desplazamientos. Esto permite a la sombra reconocerse como una sombra del texto 
sin llegar a ser una distracción. 
 color: 
o Define el color de la sombra. 
o Por lo general, un color gris oscuro es el color estándar de la sombra, pero también 
puedes probar otros colores para efectos especiales. 
 
La mayoría de los navegadores soportan este estilo, solamente IE se pone sus moños. 
 
MODELO CAJA FLEXIBLE 
El fin primordial de los diseñadores web, se centra en la apariencia y distribución de los elementos 
del sitio, existen diferentes formas de hacerlo, a continuación veremos que, si no es el mejor, al 
menos es un modelo que perite un diseño flexible y atractivo. Veamos como crear una distribución 
de modelo de caja. 
 
Veamos algunos scripts para ver el funcionamiento del siguiente script: 
1. 
2. b 
3. c 
4. 
5. e 
6. f 
7. 
8. 
 
El siguiente script de CSS3, le proporcionara los estilos al código anterior: 
 
1. div { 
2. border: 1px solid black; 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
78 
 
3. } 
4. #a { 
5. width: 300px; 
6. height: 200px; 
7. box-orient: horizontal; 
8. display: box; 
9. } 
10. #b { 
11. box-flex: 1; 
12. } 
13. #c { 
14. box-flex: 1; 
15. } 
16. #d { 
17. display: box; 
18. box-orient: vertical; 
19. box-flex: 2; 
20. } 
21. #e { 
22. box-flex: 1; 
23. box-ordinal-group: 2; 
24. } 
25. #f { 
26. box-flex: 1; 
27. } 
 
Veamos los nuevos elementos que hemos empleado en CSS: 
 
 Primero le especificamos a todos los elementos div, un borde, hasta aquí, NADA NUEVO. 
 El div con el id=”a”, al ser el contenedor primario, le damos un alto y ancho. 
 Observe que al elemento display, le hemos indicado el atributo box. Este atributo, permite 
manejar el modelo de caja flexible. 
 El atributo box-orient se emplea para determinar si los elementos anidados se mostrarán de 
manera vertical o de manera horizontal. 
 También podemos especificar el espacio que ocuparan los elementos hijos, esto se 
determina con el atributo box-flex. 
 Si a un elemento le damos el valor de cero, este ocupara el menor espacio como sea posible. 
 Si el valor de box-flex es uno, todos ocuparan el mismo espacio 
 Si un elemento tiene el valor de dos, y los demas tienen valor de uno, este elemento ocupará 
el doble de espacio que todos los demás. 
 Veamos el contenedor d, el cual contiene otro elemento llamado display, con el atributo box. 
lo cual perite hacer al contenedor flexible. 
 El elemento box-ordinal-group, indica el orden en el cual aparecerán los elementos. Por 
defecto, todos contienen el valor de uno, por lo tanto aparecen en el orden en el que fueron 
escritos. 
 
Para no correr riesgos, de que los navegadores de los usuarios no soporten estos atributos, los 
podemos implementar de la siguiente manera. 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
79 
 
1. #a { 
2. width: 300px; 
3. height: 200px; 
4. -moz-box-orient: horizontal; 
5. display: -moz-box; 
6. -webkit-box-orient: horizontal; 
7. display: -webkit-box; 
8. } 
9. #b { 
10. -moz-box-flex: 1; 
11. -webkit-box-flex: 1; 
12. } 
 
 
DEGRADADOS 
Los degradados o gradientes, son secuencias de colores, donde el degradado va de un color a otro. 
Los degradados mas comunes son los lineales y los circulares aunque los puede haber de muchas 
mas maneras. 
Anteriormente los degradados se realizaban previamente en un editor de imágenes y se colocaban 
como fondeo (background-imgae). Pero ahora CSS3 nos permite implementar los degradados 
directamente en el navegador. 
Desafortunadamente no hay aun una sintaxis de compatibilidad definida para los gradientes. 
Primero veremos la que se ocupa para Mozilla: 
Comencemos con un atributo de imagen 
 
1. background-image: 
2. -moz-linear-gradient(left, blue, white); 
 
Lo que especificamos fue: 
 Un degradado lineal. 
 El cual comienza del lado izquierdo 
 Comienza con el color azul y termina con el color blanco. 
 
Para el caso del WebKit la sintáis es diferente: 
 
1. background-image: 
2. -webkit-gradient( 
3. linear, 
4. left center, right center, 
5. from(blue), 
6. to(white) 
7. ); 
 
Igual que con Mozilla, comenzamos especificando el gradiente a una imagen. 
 
Lo que especificamos fue: 
 En el primer parámetro el tipo de gradiente 
 En el siguiente parámetro especificamos la dirección que seguirá el degradado. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
80 
 
 El valor de left center, right center, especifica que el degradado se debe mover de izquierda 
a derecha. 
 El valor left top, right bottom crearía una linea diagonal, y así puede realizar mas 
combinaciones. 
 Con los parámetros from () y to () especificamos de donde a donde van los colores, 
comenzando a partir de from (). 
 
Usted puede colocar un parámetro mas, color-stop, este se coloca entre from () y to (). 
 
 Este parámetro recibe dos valores, un porcentaje y un valor: 
 
1. background-image: 
2. -webkit-gradient( 
3. linear, 
4. left center, right center, 
5. from(blue), 
6. color-stop(51%,#901A1C), 
7. to(white) 
8. ); 
 
Para el caso de los degradados circulares, la sintaxis es similar, teniendo en cuenta las diferencias 
tanto para mozilla como para webkit. 
 
Par mozilla sería: 
1. background-image: 
2. -moz-radial-gradient(blue, white); 
 
Lo único que tiene que especificar los colores que irían de adentro hacia afuera. 
 
Para el caso de WebKit, a sintaxis es la siguiente: 
 
1. background-image: 
2. -webkit-gradient( 
3. radial, 
4. center center, 0, 
5. center center, 100, 
6. from(white), 
7. to(blue) 
8. ); 
 
Para WebKit 
 
 Asegurarse de colocar el degradado como fondo par imagen, utilizando background-image. 
 Establecer el degradado como radial 
 En el siguiente parámetro determinamos el centro donde partirá e primer color, o cual se 
especifica center center, 0. (el “0” representa el radio) 
 En el siguiente valor colocamos el centro y radio del segundo color, e cual va a tener un 
radio mayor 
 Por ultimo especificamos los colores de inicio y con el que finaliza. 
 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
81 
 
BORDES CON IMÁGENESCSS3 te permite usar una imagen como el borde de algún elemento. Este mecanismo es bastante 
poderoso, ya que al colocar una imagen de borde, CSS detecta automáticamente las esquinas y 
limites del contorno del elemento y posiciona la imagen, ya sea repitiéndola (repeat) o alargándola 
(stretch), a los parámetros del elemento asignado. 
 
Para colocar la imagen debe almacenarla dentro de su directorio del sitio web, y aplicar el siguiente 
código CSS, el cual colocará un borde a todos los elementos … (en el caso de este 
ejemplo). 
 
1. h2{ 
2. text-align: center; 
3. border-width: 15px; 
4. border-image: url("imagenBorde.png") 25% repeat; 
5. -webkit-border-image: url("imagenBorde.png") 25% repeat; 
6. -moz-border-image: url("imagenBorde.png") 25% repeat; 
7. } 
 
En el caso del html, tendremos una página simple con un título h2. Y ya junto con el CSS quedaría 
así: 
 
1. 
2. 
3. 
4. 
5. h2{ 
6. text-align: center; 
7. border-width: 28px; 
8. border-image: url("imagenBorde.png") 28 round; 
9. -webkit-border-image: url("imagenBorde.png") 28 round; 
10. -moz-border-image: url("imagenBorde.png") 28 round; 
11. } 
12. 
13. 
14. 
15. Elemento título con un borde 
16. 
17. 
 
 
Pasos para añadir un borde con imagen: 
 
 Almacena tu imagen en el directorio de tu sitio. Preferentemente la imagen debe poseer un 
diseño adecuado para ser empleada como borde, ejemplo: 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
82 
 
 
 
 
En el caso del ejemplo pasado, el efecto logrado sería: 
 
 
 
 Especifica el ancho del borde 
 
1. h2{ 
2. border-width: 15px; 
 
 Especifica que tanto del borde de la imagen deseas, en este caso el ancho especificado 
anteriormente, corresponde con el ancho que he asignado al borde de la imagen. En este 
parámetro puedes emplear porcentajes, o por defecto pixeles. Ademas puedes agregar 
cuatro valores distintos, correspondientes a los 4 lados del borde del elemento. 
 
1. h2{ 
2. border-image: url("imagenBorde.png") 25% repeat; 
 
 Finalmente añade el comportamiento deseado. Este puede adquirir diferentes valores, el 
resultado de cada uno de ellos se ve a continuación: 
 
 
Repeat. 
 
 
Round. 
 
 
Stretch. 
 
Observe como con el comportamiento “round”, el navegador detecta automáticamente, el ajuste ideal 
de la imagen para que no sufra recortes 
 
REFLEXIONES 
Una de las nuevas capacidades visuales de CSS3, es la posibilidad de crear efectos de reflexión 
empleando únicamente la siguiente línea de código. 
 
http://scriptbc.com/home/wp-content/uploads/2014/09/imagen.png?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo.png?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo.png?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo1.png?0a48b8
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo2.png?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
83 
 
1. .elemento{ 
2. -webkit-box-reflect: below 2px; 
3. } 
 
El proceso para añadir un efecto de reflexión en nuestros elementos es bastante sencillo: 
 
 Añadimos el código CSS, haciendo referencia al elemento al que le deseamos aplicar este 
efecto 
 Especificar en que lugar se desea colocar la reflexión. Normalmente se coloca (below), pero 
usted también puede indicar (above, left o right) 
 Finalmente indicaremos una anchura a la brecha. Esta brecha generalmente se especifica 
en pixeles. 
 
Veamos un breve ejemplo: 
 
Nota: Recuerde que las reflexiones no suelen ser copias fieles de la original. En la parte mas distal 
del elemento se suele difuminar el contorno, es por ello que CSS3 nos permite añadir un degradado, 
en este caso el degradado comienza desde un completo opaco, hasta un completo transparente, 
recuerde que usted también puede emplear el gradiente con otros valores. 
 
1. elemento{ 
2. -webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, 
from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5))); 
3. } 
Lo que veremos en el navegador con este código será: 
 
 
Reflección CSS3 
 
BORDES REDONDEADOS 
Desde tiempo atrás, el crear el efecto de bordes redondeados ha sido un desafío para todos los 
diseñadores web, sin embargo con CSS3, basta una sola línea de código parra lograr este efecto 
tan demandado. 
 
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo3.png?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
84 
 
Con el siguiente código, lograremos un bonito efecto de CSS3, junto con otras propiedades de 
estilos: 
 
1. h1{ 
2. width: 60%; 
3. background-color: #000066; 
4. color: #9999ff; 
5. border: #9999ff 3px groove; 
6. margin: auto; 
7. text-align: center; 
8. border-radius: 10px; 
9. } 
 
Todo el código anterior ya se encontraba en la versión previa de CSS2, lo único nuevo es “border-
radius”. Ese parametro nos permite especificar el redondeo de las esquinas. Donde dicha esquina 
será remplazada por un arco, el valor que especificamos en border-radius, equivale al radio de dicho 
arco, este valor puede estar dado en pixeles, porcentajes, o cualquier otro valor reconocible por CSS. 
 
También esta propiedad le permite especificar el borde redondeado de manera explicita, ej: 
 
borrder-top-left-radius: 5px; 
 
O de manera implicita, aceptando dos o cuatro valores, ej: 
 
border-radius: 5px 10px 5px 10px; 
 
SOMBRAS BOX SHADOW 
Usted puede añadir una sombra a cualquier elemento CSS3 con el atributo “box-shadow”. Este 
atributo funciona de manera similar al atributo “text-shadow”. 
 
El siguiente código añade una atractiva sombra para un contenedor div dado. Ej: 
 
1. 
2. 
3. 
4. 
5. div{ 
6. width: 500px; 
7. height:200px; 
8. } 
9. .shadow{ 
10. box-shadow: 10px 10px 10px #000000; 
11. -webkit-box-shadow: 10px 10px 10px #000000; 
12. -moz-box-shadow: 10px 10px 10px #000000; 
13. } 
14. 
15. 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
85 
 
16. 
17. 
18. 
19. 
Lo que veremos en el navegador, será: 
 
 
 
El atributo “box-shadow” recibe los siguientes parámetros: 
 
 x-offset o Desplazamiento horizontal de la sombra: La sombra de un elemento suele estar 
un poco desplazada con respecto al elemento que la produce y su posición será en función 
del ángulo con el que llegue la luz. En el caso de este ejemplo el primero de los valores, 
10px, quiere decir que la sombra aparecerá 10 píxeles a la derecha. Si la sombra 
quisiéramos que apareciera un poco hacia la izquierda del elemento original que la produce, 
pondríamos un valor negativo a este atributo. Cuanto más desplazamiento tenga una 
sombra, el elemento que la produce parecerá que está más separado del lienzo de la página. 
 y-offset o Desplazamiento vertical de la sombra: El segundo valor que colocamos en el 
atributo box-shadow es el desplazamiento vertical de la sombra con respecto a la posición 
del elemento que la produce. Este valor es similar al desplazamiento horizontal. Valores 
positivos indican que la sombra aparecerá hacia abajo del elemento y valores negativos 
harán que la sombra aparezca desplazada un poco hacia arriba. En el caso del anterior 
ejemplo, con -10px estamos indicando que la sombra aparecerá desplazada 10 píxeles hacia 
arriba del elemento. 
 cast-length o Difuminado: El tercer valor indica cuánto queremos que esté difuminado el 
borde de la sombra. Si el difuminado fuera cero, querría decir que la sombra no tiene ningún 
difuminado y aparece totalmente definida.Si el valor es mayor que cero, como en nuestro 
ejemplo 10px, quiere decir que la sombra tendrá un difuminado de esa anchura, 10 píxeles 
en el ejemplo. 
 Color de la sombra: El último atributo que se indica en el atributo box-shadow es el color de 
la sombra. Generalmente las sombras en el mundo real tienen un color negro o grisaceo, 
pero con CSS3 podremos indicar cualquier gama de color para hacer la sombra, lo que nos 
dará bastante más versatilidad a los diseños gracias a la posible utilización de sombras en 
distintos colores, que puedan combinar mejor con nuestra paleta. En el ejemplo anterior 
habíamos indicado una sombra con color negro. 
 
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo5.png?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
86 
 
TRANSFORMACIONES 
CSS3 incluye la habilidad de aplicar transformaciones geométricas a un elemento dado. Esto 
representa una capacidad sin precedentes para el manejo de elementos en un entorno Web. 
El atributo “transform” te permite aplicar cualquier tipo de transformación matemática a cualquier 
elemento html, como un div, section, article, img, etc. 
 
Los parámetros que acepta este atributo son: 
 
 translate: Permite mover el objeto desde su posición original. Esta propiedad emplea los 
valores (x, y) para indicar la nueva ubicación en la que sera posicionada el elemento. 
 rotate: Gira un elemento. El valor se expresa en grados, si es positivo gira en el sentido de 
las agujas del rejo, si es negativo, en el sentido contrario. 
 scale: Aumenta o disminuye el tamaño del elemento; su valor normal es 1. Valores 
superiores aumentan su tamaño e inferiores lo disminuyen así, 1.5 hará que se vea un 50% 
más grande y 0.5 un 50% más chico; si sólo se coloca un valor, este se aplica a ambas 
direcciones, caso contrario, el primero indica el ancho (x) y el segundo el alto (y). scaleX(x) 
y scaleY (y) son lo mismo pero sólo afectan al ancho (X) o al alto (Y). 
 skew: Skew significa sesgar o sea, inclinar y eso hace esta propiedad que también utiliza 
ángulos como valor (grados), el primero afecta al eje X (horizontal) y el segundo al eje Y 
(vertical). skewX(a) y skewY(a) hacen lo mismo pero sólo sobre uno de los ejes. 
 
Observe el siguiente código, para entender un poco mejor como funciona este atributo: 
 
1. 
2. 
3. 
4. 
5. #caja1, #caja2, #caja3, #caja4, #caja5{ 
6. width: 100px; 
7. height: 80px; 
8. border: 3px solid black; 
9. margin: 20px; 
10. } 
11. #caja1{ 
12. background-color: blue; 
13. } 
14. #caja2{ 
15. background-color: green; 
16. transform: translate(100px, 0px); 
17. -webkit-transform: translate(100px, 0px); 
18. -moz-transform: translate(100px, 0px); 
19. } 
20. #caja3{ 
21. background-color: red; 
22. transform: rotate(45deg); 
23. -webkit-transform: rotate(45deg); 
24. -moz-transform: rotate(45deg); 
25. } 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
87 
 
26. #caja4{ 
27. background-color: yellow; 
28. transform: scale(2) translate(100px, 0); 
29. -webkit-transform: scale(2) translate(100px, 0); 
30. -moz-transform: scale(2) translate(100px, 0); 
31. } 
32. #caja5{ 
33. background-color: purple; 
34. transform: skew(30deg,20deg); 
35. -webkit-transform: skew(30deg,20deg); 
36. -moz-transform: skew(30deg,20deg); 
37. } 
38. 
39. 
40. 
41. Caja 1 
42. Caja 2 
43. Caja 3 
44. Caja 4 
45. Caja 5 
46. 
47. 
 
Lo que veremos en el navegador será: 
 
 
Transformaciones. 
 
Esto combinado con algunos elementos hover, y transiciones permite crear grandes efectos con 
CSS3, cuyo único límite creativo es la imaginación. Pero esto ya es tarea de ustedes. 
 
http://scriptbc.com/home/wp-content/uploads/2014/09/Sin-t%C3%ADtulo6.png?0a48b8
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
88 
 
TRANSISIONES Y ANIMACIONES 
Quizá una de las propiedades más llamativas de CSS3 son las transiciones, o la posibilidad de 
realizar pequeñas animaciones. Esta nueva propiedad junto con pseudo.clases como: hover, 
realmente nos permite crear cosas muy interesantes. 
 
Por ejemplo observemos el siguiente código, el cual consta de un título que cambia de negro a rojo 
a pasar el cursor sobre el elemento. 
 
1. 
2. 
3. 
4. 
5. #caja1{ 
6. width: 100px; 
7. height: 100px; 
8. border: 3px solid black; 
9. } 
10. 
11. #caja1:hover{ 
12. transform: rotate(180deg); 
13. -webkit-transform: rotate(180deg); 
14. -moz-transform: rotate(180deg); 
15. } 
16. 
17. 
18. 
19. Caja 1 
20. 
21. 
 
Quizá esto ya lo conozca, sin embargo observe lo que sucede al añadir la propiedad transition: 
 
1. 
2. 
3. 
4. 
5. #caja1{ 
6. width: 100px; 
7. height: 100px; 
8. border: 3px solid black; 
9. transition: all 1s ease-in; 
10. -webkit-transition: all 1s ease-in; 
11. -moz-transition: all 1s ease-in; 
12. } 
13. 
14. #caja1:hover{ 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
89 
 
15. transform: rotate(180deg); 
16. -webkit-transform: rotate(180deg); 
17. -moz-transform: rotate(180deg); 
18. } 
19. 
20. 
21. 
22. Caja 1 
23. 
24. 
 
Observe como este pequeño cambio crea un efecto totalmente nuevo, la transición de negro a rojo, 
se realiza de manera sutil y elegante, dándole un sentido de gran estética a este proceso. 
 
Y lo mejor no termina aquí, si las transiciones las combinamos junto con las transformaciones, que 
de hecho es lo más usual, podremos lograr cosas realmente increíbles. 
 
La sintaxis de transition es la siguiente: 
 
1. p{ 
2. transition:[Propiedad CSS] [Tiempo] [Función de Tiempo] [Retardo]; 
3. } 
 
El atributo “transition puede aceptar los siguientes valores” 
 
Propiedad CSS: Aquí podemos colocar la propiedad CSS que será animada, podemos colocar 
cualquier propiedad CSS que este en la siguiente lista: 
 
 background-color 
 border 
 border-radius 
 color 
 top 
 bottom 
 left 
 right 
 box-shadow 
 clip 
 fill 
 height 
 width 
 line-height 
 letter-spacing 
 margin 
 opacity 
 outline 
 stroke 
 text-shadow 
 vertical-align 
 word-spacing 
 visibility 
 z-index 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
90 
 
Existe también una opción “comodín” que no importa cual propiedad o incluso si son dos esta opción 
seleccionará todas las propiedades CSS: 
all 
 
 
Tiempo: Aquí podemos colocar el tiempo que durará nuestra animación, ¿cuánto tiempo quieres que 
tarde en agregar ese borde rojo? Lo podemos colocar en unidades de segundos, cualquier cantidad 
de segundos que quieras. 
 
.1s 
.5s 
1s 
10s 
 
Siempre recordando que no hay que abusar de esta propiedad, pues si ponemos mucho tiempo el 
usuario se aburrirá de esperar a que ocurra el efecto. Y si colocamos demasiado poco tiempo no 
podrá ver la animación. 
 
Funcion de Tiempo: Aquí es un tanto extraño para muchos que no son muy adentrados en el tema 
de animaciones. Se trata de unas funciones que están predefinidas que permiten que avance mas 
rápido al inicio de la animación y mas lento al final, al revés o que dure mas tiempo en el medio de 
la animación. 
 
Podemos colocar cualquiera de estas funciones que ya están definidas: 
 
 linear.- La animación se realiza de manera uniforme 
 ease.- La animación acelera al iniciose retarda un poco y se acelera al final de nuevo 
 ease-in.- La animación se retarda al inicio, pero lo repone al final 
 ease-out.-La animación se acelera al inicio pero se retarda al final, 
 ease-in-out.- La animación se retarda al inicio se acelera un poco luego se retarda 
al final de nuevo. 
 
Cabe rescatar que aunque se retarde al inicio, al final o a la mitad de la animación siempre durá el 
tiempo que le definimos en la sub-propiedad [Tiempo]. 
 
Retardo: Aqui colocaremos el tiempo que tardará la animación en iniciar. Lo debemos definir en 
unidades de segundos. Tambien hay que tener un poco de tacto y ponernos en los zapatos de 
nuestras visitas y no colocar demasiado tiempo. 
 
.1s 
.5s 
1s 
10s 
 
Recuerde que estos efectos no están disponibles en todos los navegadores de manera nativa, es 
por ello que debe emplear los prefijos -webkit- y -moz- para asegurar su funcionamiento en la mayoría 
de los navegadores. 
 
TRANSPARENCIAS 
CSS3 nos permite tener un control total sobre el manejo de opacidades en imágenes. CSS3 nos 
proporciona la propiedad “opacity“, la cual puede recibir valores de cero a uno, donde cero-(0) es 
completamente transparente y uno-(1) es totalmente opaco. 
 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
91 
 
Observe el siguiente ejemplo de un elemento con transparencia, superpuesto en una imagen. 
 
HTML 
 
 
CSS3 
body{ 
 background-image: url(http://sergimateo.com/wp-content/2012/01/fondo-
madera-negro.jpg); 
} 
#caja{ 
 position: absolute; 
 top: 50px; 
 left: 100px; 
 height: 100px; 
 width: 100px; 
 border: 1px solid red; 
 background-color: white; 
 opacity: 0.3; 
} 
 
También podemos realizar superposiciones de colores y crear combinaciones: 
 
HTML 
 
 
 
 
 
CSS3 
#caja1{ 
 width: 100px; 
 height: 100px; 
 border: 1px solid black; 
 position: absolute; 
 top:5px; 
 left:10px; 
 background-color: red; 
 opacity: .9; 
 
} 
#caja2{ 
 width: 100px; 
 height: 100px; 
 border: 1px solid black; 
 position: absolute; 
 top:20px; 
 left:30px; 
 background-color: green; 
 opacity: .5; 
} 
#caja3{ 
 width: 100px; 
 height: 100px; 
 border: 1px solid black; 
 position: absolute; 
 top:40px; 
 left:50px; 
CSS3 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
92 
 
 background-color: blue; 
 opacity: .5; 
} 
#caja4{ 
 width: 100px; 
 height: 100px; 
 border: 1px solid black; 
 position: absolute; 
 top:60px; 
 left:70px; 
 background-color: yellow; 
 opacity: .5; 
} 
 
Como se puede dar cuenta esta posibilidad que nos proporciona CSS3, es muy poderosa si se le 
emplea con buen gusto, pero eso ya es la tarea de cada quien. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
94 
 
JavaScript 
INTRODUCCIÓN A JAVASCRIPT 
JavaScript se emplea en una página web para dotarla de funcionalidades que el HTML no puede 
proporcionarle. 
La integración de JavaScript con HTML se logra mediante las etiquetas y . 
La etiqueta de anteriormente debía especificar el lenguaje al que hacia referencia, pero bajo 
los nuevos estándares de HTML5 solo basta colocar la etiqueta …el Código… . 
 
La sintaxis correcta para incluir código JS en nuestra página es: 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
10. 
11. 
12. 
13. 
14. 
 
Dentro del Script encontramos las líneas que corresponden a los comentarios en HTML, 
se emplean para indicar que si el navegador no soporta JavaScript, se ignoren las líneas de código. 
Hoy día no existe prácticamente ningún navegador que no soporte JS. 
 
Existe otro tag que podemos incorporar a nuestras páginas, se trata de: y que 
permiten intercalar un código alternativo en caso de que el navegador no soporte JS. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
10. 
11. 
12. Mala pata, amigo. Su navegador no soporta scripts. 
13. 
14. Consiga uno nuevo o retírese de este negocio. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
95 
 
15. 
16. 
17. 
18. 
19. 
 
En el caso de estos ejemplos he colocado el script en la sección delimitada por las etiquetas 
y , lo cual no tiene por que ser así, ya que los script pueden colocarse en head, o en body, 
indistintamente. 
 
Primer script 
 
Veremos un script con la famosa frase hola mundo la cual guardaremos con el nombre de 
“saludo.html”. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
10. 
11. 
12. 
13. Esto es el body de la página. 
14. 
15. 
 
COLOCAR JS CORRECTAMENTE 
El código JavaScript puede ser colocado en varios lugares del documento HTML: entre 
 o entre las etiquetas . 
El lugar mas común para colocar el código JavaScript, es entre y , cerca de la parte 
superior de la página. 
Existen otras consideraciones a la hora de escribir, o colocar el código JavaScript dentro de nuestro 
documento, por ejemplo. Cuando estamos trabajando en una versión extendida de HTML, por 
ejemplo (XHTML), la manera correcta de escribir nuestro código es: 
 
1. 
2. 
5. 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
96 
 
También existen variaciones en la interpretación del JavaScript, por la versión del navegador que 
ocupe el usuario, como el hecho de que navegadores antiguos no reconocen el “CDATA”, por tal 
motivo es común que se coloquen a modo de comentario: 
 
1. 
2. // 
5. 
 
Para incorporar código JavaScript entro de nuestro documento lo podemos hacer básicamente de 
tres maneras: 
 
Código en linea 
 
De esta manera se coloca el JavaScript dentro de una etiqueta HTML: 
 
1. 
 
Código embebido 
 
Es una de las formas usuales para pequeños fragmentos de código. Se hace colocando el código 
dentro de las etiquetas y dentro del o el . 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 17) // Se comprueba si es mayor de edad 
12. { 
13. alert ("Usted es adulto."); 
14. } else { 
15. alert ("Usted es menor de edad."); 
16. } 
17. //--> 
18. 
19. 
20. 
21. 
22. 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
97 
 
Codigo externo 
 
Colocar el código JavaScript en un enlace externo es una de las formas mas recomendadas. Se 
realiza mediante un enlace que hace referencia a nuestro archivo externo, y desde luego nuestro 
archivo externo con su correspondiente código JavaScript.1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
8. 
9. Esto es el cuerpo de la página. 
10. 
11. 
 
Esta manera de incluir código JavaScrit, nos permite: 
 
 Un mismo archivo enlazarlo a varias páginas, de esta manera cunado desee hacer 
modificaciones en su código JavaScript, con una sola módificación todas las páginas se 
verán afectadas. De tener el código separado en cada página, tendría que modificar varias 
veces el mismo código 
 De lo anterior resulta una manera mas fácil de mantener su sitio web. 
 Al tener el código JavaScript en un archivo separado, la permite al navegador almacenar 
dicho archivo en la chace y por lo tanto la carga de la página se hace mas rápida. 
 Hace que su sitio sea mas legible al mantener la estructura HTML y código JavaScript por 
separado. 
 
FUNCIÓN alert( ) 
Para empezar veremos que es una Función de JavaScript. 
Una función se compone de una palabra reservada (el nombre de la función) y de unos paréntesis 
argumentales. 
Aquello que coloquemos entre los paracentesis argumentales, sera lo que la función ocupara para 
su operativa. 
 
Tenga presente que algunas funciones pueden tener los paracentesis vacíos, pero de todas formas 
deberán ser colocados inmediatamente después del nombre de la función SIN DEJAR ESPACIO 
 
Case Sensitive: A diferencia de HTML, JavaScript es de los lenguajes llamados Case Sensitive, lo 
cual indica que detecta entre mayúsculas y minúsculas. 
Por lo tanto no podemos alterar las funciones como “Alert o alert”, no las podemos alterar, de lo 
contrario no serán interpretadas. 
 
En la lección anterior del curso de JavaScript, empleamos la función alert(), la cual genera un cuadro 
de aviso, deteniendo la carga de la página hasta que el usuario pulse el botón que se incluye en 
dicho cuadro de aviso. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
98 
 
Esta función se emplea cuando queremos mostrarle un mensaje al Usuario, el cuadro aparecerá 
pese a las acciones del usuario, bueno a no ser que desactive las ventanas emergentes, pero en la 
mayoría de los navegadores se mostrara el cuadro. 
Entre los paracentesis se coloca aquello que nosotros queremos que el usuario vea, puede ser un 
texto literal colocado entre comillas (luego hablaremos de esto), un numero o una variable (la cual 
también la discutiremos posteriormente). 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
10. 
11. 
12. 
13. Esto es el body de la página. 
14. 
15. 
 
En el ejemplo anterior, recuerde que puede omitir el (language=”javascript”). 
También observe el (;) a final de la función, la mayoría de las instrucciones de cualquier lenguaje se 
emplean comillas salvo algunas excepcione que veremos después. 
Otra cosa que debe tener presente, es que las instrucciones de deben ir en una sola línea sin pulsar 
[ENTER]. 
 
Ejecute el código en su navegador y verá lo que pasa, además pruebe con otros argumentos como: 
 
1. alert("Argumento entre comillas"); 
2. alert(Argumento sin comillas); 
3. alert(345); 
4. alert("345"); 
 
Las ultimas dos alertas son mostradas iguales, sin embargo son de tipo diferente. 
 alert(345) – Es un dato de tipo “number” es decir, dato numérico 
 alert(“345″) – Es un dato de tipo “string” es decir, dato literal 
 
COMENTARIOS 
Al igual que todos los lenguajes de programación nos permite colocar comentarios para documentar 
el código. 
Es importante que usted tenga el hábito de colocar comentarios para facilitar la comprensión de 
nuestros códigos, imagine que tiene un código de 300 lineas que hace varias cosas y manipula 
diferentes elementos HTML de nuestra página, tal vez no tenga problemas al manipular el código los 
primeros días después de haberlo terminado, sin embargo si dentro de tres meses usted desea 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
99 
 
realizar alguna modificación, frecuentemente resulta mas viable tirar todo el trabajo y hacerlo de 
nuevo a estar descifrando que hace cada cosa. 
La alternativa es que el código esté profusamente documentado, con la finalidad de que usted sepa 
que hace cada cosa y tenga una referencia para trabajar con él. 
Y además, en la actualidad el trabajo en equipo de los programadores es indispensable y si su código 
no esta bien documentado el pobre compañero que le toque realizar algún procedimiento en el 
código terminara sus días con una camisa de fuerza y condenso a ver elefantes voladores de por 
vida 
Un dato que usted debe tener en cuenta es que al incluir comentarios, el peso de nuestro archivo irá 
aumentando y su página podría tardar mas en cargar, por ello es una buena idea que realice dos 
versiones de su código, uno donde tenga toda la documentación que necesite para realizar el 
mantenimiento apropiado y otro que suba a su servidor sin comentarios. 
 
En JS existen dos maneras para introducir comentarios: 
 
Comentario de una línea: 
 
Se indica con // (doble barra) 
Estas barras dobles le indican al navegador que todo lo que esté enfrente de estas sobre la misma 
linea, es decir, sin dar [Enter], es un comentario. 
 
Comentario de varias líneas: 
 
Se indica con /* aquí va el comentario */ 
Con esta indicación, el navegador ignorará todo el contenido que se encuentre ente la barra asterisco 
que abre y el asterisco barra que cierra 
Puede colocar el comentario en varias líneas, es decir, aunque usted oprima [Enter] 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
12. 
13. 
14. 
15. Esto es el body de la página. 
16. 
17. 
 
 
 
 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
100 
 
DECLARACIÓN DE VARIABLES 
En este capítulo hablaremos de los distintos tipos de Datos que se pueden manejar desde 
JavaScript. Y cómo manejarlos. 
Primero debemos definir un término sumamente empleado en lenguajes de programacion, me refiero 
a las variables. 
 
Variable: Es una zona de la memoria del ordenador donde se guarda un dato y que se identifica con 
un nombre, por ello algunos autores las llaman pares nombre-valor. 
El dato que se almacena bajo ese nombre puede cambiar durante la ejecución del código; por eso 
se llaman variables. 
 
Imagine que una variable es un contenedor, dicha caja se llama variable uno, Cuando nos referimos 
a este contenedor, realmente estamos teniendo acceso al contenido de la misma (es decir, al valor 
de la variable). Dentro de esa caja podemos tener una cadena literal, un valor numérico o algunas 
otras cosas. Cuando una variable tiene un determinado contenido y se le asigna otro, el anterior se 
pierde, es decir, una variable no puede tener dos contenidos o más simultáneamente. 
 
Para lo anterior existen algunas excepciones de las que hablaremos mas tarde. 
 
En un código JavaScript podemos usar tantas variables como sean necearías pero para poder usar 
una variable primero debemos declararla. 
Declarar una variable significa decirle al navegador que reserve espacio en memoria, para el uso de 
esa variable. 
 
Existen dos maneras para declarar una Variable. 
 
Declaración explícita 
 
Para declarar una variable de manera explícita utilizamos la instrucción var, seguida del nombre de 
la variable, como en la siguiente línea de código. 
 
1. var VariableUno;Una vez que la variable ha sido declarada, se ha reservado en memoria espacio para ella, pero 
todavía no tiene ningún valor. Para poder usarla es necesario darle un valor inicial, esto es lo que se 
conoce como Inicialización de una variable. 
Para ello empleamos el operador de asignación =. 
 
1. var VariableUno = 10; 
 
Veamos como funciona en un código las variables: 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
12. 
13. 
14. 
15. 
16. 
 
Para ahorrar código, al utilizar la declaración explicita de variables, podemos realizar la declaración 
y la inicialización en una sol línea, tal como se muestra en el siguiente código. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
11. 
12. 
13. 
14. Además podemos declarar e inicializar varias variables y en la misma línea: 
15. 
16. 
17. 
18. Página con Javascript. 
19. 
20. 
21. 
26. 
27. 
28. 
29. 
30. 
 
Declaración Implícita 
JavaScript nos permite declarar una variable por el simple hecho de inicializarla, es decir, no es 
necesario declarar la variable mediante el uso de la palabra reservada var. 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
102 
 
Al inicializar la variable, el navegador le reserva espacio en la memoria. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
11. 
12. 
13. 
14. 
15. 
 
Es recomendable declarar e inicializar nuestras variables, con la finalidad de mantener una 
organización más estricta de nuestro código que nos ayude a su mantenimiento y control del mismo. 
 
Nota: JavaScript, no necesita que le especifiquemos el tipo de variable que le vamos a asignar, es 
decir, no le tenemos que decir que el dato que almacenará será booleano, literal, entero, decimal 
etc. con el simple hecho de la inicialización, el interprete sabe a que tipo de variable estamos 
haciendo referencia, incluso cambiar e tipo si el programa lo requiere para su ejecución. 
 
NOMBRES DE VARIABLES 
Para escribir e nombre de las variables debemos tener en cuenta algunas consideraciones. 
 
 Los nombres de las variables no deben empezar por un número, sino por una letra. 
 Podrá contener números, letras y el guión bajo, pero ningún otro signo (ni siquiera el punto 
o el guion normal). 
 Los nombres de las variables solo deben contener letras del alfabeto ingles. 
 No pueden contener espacios en blanco. 
 No podemos usar como nombre de nuestra variable una palabra reservada de JavaScript, 
si lo podemos hacer, pero no es aconsejable. 
 Debemos recordar que JavaScript es sensible al uso de mayúsculas y minúsculas 
 Cuando el nombre de nuestra variable está formada por más de dos palabras, es buena idea 
poner la primera en minúscula y las demás con la primera letra en mayúsculas, sin separar. 
 
En las siguientes publicaciones iremos viendo los tipos de variables, y el uso que les podemos dar. 
 
VARIABLES LITERALES 
También llamados pares nombre-valor, se emplean para almacenar un valor bajo un nombre y el 
cual se puede emplear para realizar alguna operación o para devolverle al usuario un resultado. 
En JavaScript, como en cualquier lenguaje de programación, se pueden manejar datos de diferentes 
tipos. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
103 
 
Por ejemplo, si declaramos una variable para que contenga el nombre de un usuario, por su 
naturaleza, este dato será de tipo cadena o literal, ya que el nombre de una persona esta formado 
por letras. 
Si declaramos otra variable que contenga su edad, esta será de tipo numérico. En el caso de las 
fechas, JavaScript designa un tipo de dato específico que posteriormente veremos. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
13. 
14. 
15. 
16. 
17. 
 
El contenido del literal es lo que está escrito en las comillas. Es importante que tenga claro esto, por 
lo que le ruego que ejecute el código respetando la sintaxis marcada. 
Como puede ver, las comillas no aparecen, es parte de la forma de escribir las cadenas, pero no 
forman parte del mensaje. 
 
Variables Literales 
En JavaScrpt podemos realizar varias operaciones con las cadenas alfanuméricas o cadenas de 
texto. 
Comenzaremos a ver algunos fundamentos necesarios para emplear estas funciones, ya que a lo 
largo de estos cursos, usted vera los diferentes usos que les podemos dar a estos datos. 
 
Concatenaciones 
Cuando se habla de cadenas alfanuméricas, se conoce como concatenación al proceso de unir dos 
o mas cadenas en una sola mediante el uso del operador +. 
 
Veamos el siguiente ejemplo. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
12. 
13. 
14. 
15. 
16. 
 
Como puede ver, las dos variables aparecen unidas gracias al operador de asignación. 
También podemos concatenar cadenas literales con valores numéricos: 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
12. 
13. 
14. 
15. 
16. 
 
Sin embargo esto es sumamente desaconsejable por los errores inesperados que se puedan 
presentar al mezclar valores, por eso, lo mejor será redactar el código anterior con ambas variables 
en literal: 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
12. 
13. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
105 
 
14. 
15. 
16. 
 
 
Métodos y Propiedades de datos literales 
 
Para hacer uso de los métodos y propiedades en JavaScript se hace uso del punto de concatenación, 
mas la propiedad que se desea. 
Estas propiedades realizan diferentes funciones y acciones en el manejo de variables. 
 
1. 
2. 
3. 
4. Metodos y propiedades con cadenas 
5. 
6.
7. 
8. var x = "Tamaño de la cadena."; 
9. alert(x.length); 
10. 
11. 
12. 
 
El script anterior, hace uso de la propiedad length, la cual especifica el número de caracteres por los 
que está compuesta una cadena. 
Algunos métodos de las cadenas de uso común, además de substring, incluyen slice, substr, concat, 
toUpperCase, toLowerCase, y el patrón de los métodos de coincidencia, match, search, y replace. A 
continuación explicaremos cada uno de ellos. 
Los métodos que cambian las cadenas incluyen slice, substring, substr, y concat. 
 
slice y substring 
Los métodos de slice y substring devuelven valores de cadena a base de otra cadena. Ellos aceptan 
dos argumentos: la posición inicial y una posición final opcional. He aquí algunos ejemplos: 
 
1. 
2. 
3. 
4. Metodos y propiedades con cadenas 
5. 
6. 
7. 
8. var miCadena = "Esto es una cadena."; 
9. alert(miCadena.substring(3)); //Regresa "o es una cadena" 
10. alert(miCadena.substring(3,9)); //Regresa "o es u" 
11. alert(miCadena.slice(3)); //Regresa "o es una cadena." 
12. alert(miCadena.slice(3,9)); //Regresa "o es u" 
13. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
106 
 
14. 
15. 
 
Una diferencia sutil entre slice y substring es cómo manejan argumentos con valores negativos. El 
método substring convertirá los valores negativos en 0, mientras que slice tratará argumentos 
negativos como el punto de partida desde el final de la cadena (contando hacia atrás). 
 
substr 
El método substr también acepta dos argumentos: 
El primero es la posición de inicio para volver 
El segundo argumento es el número de caracteres a mostrar, no la posición de parada. 
Por lo tanto, los ejemplos de código para slice y substring trabajan un poco diferente con substr: 
 
1. 
2. 
3. 
4. Metodos y propiedades con cadenas 
5. 
6. 
7. 
8. var miCadena = "Esto es una cadena."; 
9. alert(miCadena.substr(3)); 
10. alert(miCadena.substr(3,9)); 
11. 
12. 
13. 
 
concat 
El método de concatenación ya lo habíamos visto anteriormente. 
Se trata de un método que permite unir dos o mas cadenas mediante el operador mas (+). 
 
toUpperCase y toLowerCase 
Este método permite convertir una cadena a Mayúsculas (toUpperCase) o a minúsculas 
(toLoweCase). 
 
1. 
2. 
3. 
4. Metodos y propiedades con cadenas 
5. 
6. 
7. 
8. var myString = "Esto es una cadena"; 
9. alert(myString.toUpperCase()); // "ESTO ES UNA CDENA" 
10. alert(myString.toLowerCase()); // "esto es una cadena" 
11. 
12. 
13. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
107 
 
 
Desde luego que existen muchos otros métodos para el manejo de cadenas, sin embargo, no todas 
son tan comunes, si usted lo desea puede consultar mas métodos en el siguiente link, 
(http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf). 
 
SECUENCIAS DE ESCAPE 
Anteriormente hemos visto como una cadena literal se escribe entre comillas, pero estas no se 
almacenan con la cadena. 
Este es un comportamiento normal de las cadenas, sin embargo cuando deseemos que las comillas 
aparezcan, debemos hacer uso de las secuencias de escape. 
Las secuencias de escape están formadas por una barra invertida, seguida de un carácter o de una 
letra según nos convenga. 
Para lograr mostrar las comillas que rodean a la palabra “Hola” en el siguiente código lo debemos 
escribir de la siguiente manera. 
 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
11. 
12. 
13. 
14. 
15. 
 
Existen diferentes secuencias de escape, con funciones distintas a solo mostrar signos restringidos, 
como dar un enter, retorno al carro. 
 
Observe la siguiente tabla, donde expongo algunas de las secuencias de escape más comunes. 
 
CÓDIGO ASCII CARÁCTER BARRA SIGNIFICADO 
8 b Retroceso (BS) 
9 t Tabulador Horizontal (HT) 
10 n Nueva Línea, Enter (LF) 
12 f Nueva Página (FF) 
http://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
108 
 
13 r Retorno 
34 ” Comillas Dobles 
39 ‘ Comillas Simples 
92 Barra Invertida 
 
Por el momento es necesario que conozca estas secuencias, para que cuando aparezcan en 
capítulos posteriores, sepa de qué se trata, ademas de que en su debido momento realizaremos la 
explicación adecuada para que este cociente de todo el funcionamiento del script. 
 
COMILLAS SIMPLES Y COMILLAS DOBLES 
JavaScript permite delimitar una cadena alfanumérica con comillas simples o dobles indistintamente. 
Por ejemplo: 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
11. 
12. 
13. 
14. 
15. 
 
El uso de comillas simples o dobles, es mera cuestión de criterio. Podria ser otra forma de escribir 
comillas dentro de la cadena: 
1. 
2. 
3. 
4. Página con Javascript. 
5. 
6. 
7. 
11. 
12. 
13. 
14. 
15. 
 
Es importante que si establece comillas dobles para delimitar, se mantenga constante en su empleo, 
para evitar errores futuros. 
PUNTO Y COMA 
El punto y coma se emplea como delimitador de las sentencias que se realizan a lo largo del código, 
es una forma de indicarle al intérprete que la instrucción ha terminado en ese lugar. 
 
Existen algunos lugares en los que podemos omitir el uso de punto y coma, y otros donde 
definitivamente no se deben usar. 
 
Incluso en algunos lugares, cuando usted omite el uso de punto y coma, el intérprete puede colocar 
uno, lo cual puede o solucionar algún problema o causarlo, por ejemplo: 
 
Suponga las siguientes líneas de código: 
 
1. return 
2. (varName); 
 
Lo cual la manera correcta de hacerse es: 
 
1. return(varName); 
 
Este es uno de los casos cuando no puede dejarse espacios en blanco 
Lo que el intérprete decodificará será: 
 
1. return; 
2. (varName); 
Produciendo un error. Como regla general es aconsejable y una buena práctica siempre hacer uso 
del punto y coma cada que termine una sentencia o declaración. 
Pero, definitivamente nunca debe emplear punto y coma cuando se trate de bucles o sentencias if, 
como en los siguientes ejemplos: 
 
1. if (a == 4) 
2. { 
3. // code goes here 
4. } 
 
La razón es que todo el bloque de código pertenece a una misma declaración, y si se le coloca un 
punto y coma, se rompería la secuencia del mismo. 
Este sería un ejemplo de un código incorrecto. 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
110 
 
1. if (a == 4); 
2. { 
3. // code goes here 
4. } 
 
Como un tip, cuando abra un bucle o una función, omita el uso del punto y coma. 
 
SENTENCIASO EXPRESIONES 
Anterior mente ya habíamos visto algunas sentencias, como el caso de la función alert ( ), pero no 
habíamos hablado del concepto general de sentencia. 
Pues en esta publicación vamos a explicar a que se refiere cuando decimos una sentencia de 
JavaScript, o en ingles (Statements or Expresion). 
Una sentencia, es un conjunto de instrucciones que son procesadas por el “interprete” de JavaScript 
y realizan una acción en concreto. Es decir, es la manera en al que nosotros le hablamos a JavaScript 
para que realice “x” o “y” cosa. 
 
Como está conformada una sentencia 
Una sentencia puede estar conformada por una colección de bloques que incluyen palabras claves, 
literales, separadores, operadores, identificadores, variables, constantes, los cuales se estructuran 
de tal manera que tengan sentido para el interprete de JavaScript, y este pueda realizar la acción 
solicitada. 
 
Estos son algunos ejemplos de sentencias. 
1. var x = 4; 
2. var y = x * 4; 
3. alert("Hello"); 
 
Clasificación de las Sentencias 
Las sentencias se pueden clasificar básicamente en dos tipos de acuerdo a su estructura  Simples: Una sentencia simple, comprende aquellas instrucciones que 
generalmente no abarcan mas de una linea, como es el caso de las declaraciones 
de variables  Compuestas: Una sentencia compuesta, es la que comprende diferentes niveles de 
lógica. Este tipo de sentencias emplea operadores, condicionales y pueden llegar a 
ser sumamente largas. 
 
Ejemplo de sentencia simple 
1. var x = 4; 
 
Ejemplo de sentencia compuesta. 
 
1. if (siEsto == 1) { 
2. // algo de código aquí 
3. } else { 
4. // algo de código aquí también 
5. } 
 
Bien, este tema no es tan crucial para el aprendizaje de JavaScript, sin embargo es necesario que 
conozca todos estos fundamentos, para crear un aprendizaje sólido, recuerde que para que el día 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
111 
 
de mañana usted pueda crear sus propios script, es necesario conocer todos los fundamentos 
teóricos para después dejar volar la imaginación y comenzar a crear. 
 
ESPACIOS EN BLANCO E IDENTACIÓN 
Para escribir su código JavaScript, no importa si deja espacios entre las sentencias, o tabula su 
código. Usted puede implementar cualquier estándar de redacción que facilite la lectura de su código. 
Salvo algunas excepciones, cuando se emplean palabras reservadas como return() pueden no ser 
interpretadas si se escriben en la misma línea. (Después veremos un ejemplo de esto) 
La ventaja de dejar espacios en blanco y tabular el código es que permiten hacer más legible su 
código. 
 
Suponga el siguiente código “sin espacio”. 
 
1. function cubeme(incomingNum) { 
2. if (incomingNum == 1) { 
3. return "What are you doing?"; 
4. } else { 
5. return Math.pow(incomingNum,3); 
6. } 
7. } 
8. var theNum = 2; 
9. var finalNum = cubeme(theNum); 
10. if (isNaN(finalNum)) { 
11. alert("You should know that 1 to any power is 1."); 
12. } else { 
13. alert("When cubed, " + theNum + " is " + finalNum); 
14. } 
 
 
Resulta mucho más complicado leerlo, tal vez no en la primera semana de haberlo realizado, pero 
quizá dentro de unos años, y unos cientos de líneas más, se tornarán una tarea titánica la lectura 
del código. 
 
1. function cubeme(incomingNum) { 
2. if (incomingNum == 1) { 
3. return "What are you doing?"; 
4. } else { 
5. return Math.pow(incomingNum,3); 
6. } 
7. } 
8. var theNum = 2; 
9. var finalNum = cubeme(theNum); 
10. if (isNaN(finalNum)) { 
11. alert("You should know that 1 to any power is 1."); 
12. } else { 
13. alert("When cubed, " + theNum + " is " + finalNum); 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
112 
 
14. } 
 
Ambos códigos funcionan exactamente igual, pero la lectura del segundo código es mucho más 
sencilla y fácil de entender. 
 
Retorno de Carro o Salto de Línea 
Relaciona estrechamente con el espacio en blanco, e incluso al punto y coma, son los saltos de 
línea, a veces llamados retornos de carro. Conocido en el funcionario ECMA-262 estándar como 
“Los finales de línea”, estos elementos separan una línea de código de la siguiente. 
Como era de esperar, el uso más común de los saltos de línea es la de separar las líneas individuales 
de código para facilitar la lectura. También puede mejorar la legibilidad de largas líneas de código. 
Sin embargo, al hacerlo, tenga en cuenta que la colocación errónea de estos saltos de línea pueden 
producir errores. 
 
PALABRAS RESERVADAS 
Algunas palabras, son de uso exclusivo de JavaScript, es decir, usted no la puede emplear para 
nombrar a sus variables, identificadores, constantes etc. ya que si lo hace podría ocasionar 
resultados inesperados, y un gran dolor de cabeza para tratar de corregir estos errores. 
De acuerdo a las especificaciones de ECMA-262 edición 5.1, las sigueintes palabras son de uso 
reservado para JavaScript. 
 
break delete case do 
catch finaly continue for 
debugger function default if 
else in instanceof var 
new void return while 
switch with this class 
throw const try enum 
typeof export import extends 
super implements let private 
interface package protected public 
static yield 
 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
113 
 
No es necesario que las memorice por ahora, la práctica la hará eso por usted, pero si es importante 
que sepa que estas palabras no deben ser empleadas como variables, identificadores, o constantes, 
ya que esto podría ocasionar resultados inesperados. 
 
INTRODUCCIÓN A LAS FUNCIONES 
Ya hemos visto algunos ejemplos de funciones en JavaScript, tal como la función alert(), pero existen 
otras tantas que veremos a continuación, y prácticamente a partir de ahora, todo el tiempo estaremos 
viendo el empleo de funciones. 
Una cosa que es importante destacar en el uso de las funciones de JavaScript, es que dependiendo 
de la versión del lenguaje, algunas de las funciones más modernas, no van a ser visualizadas en 
todos los navegadores, un recurso que les puede ayudar, a conocer todas estas cuestiones de 
compatibilidad es la siguiente página web: http://www.quirksmode.org/compatibility.html 
Pongamos algo en práctica 
JavaScript, es uno de los lenguajes, que permite la definición de funciones por parte del usuario, así 
que en este ejemplo haremos algo de esto: 
 
Primero veamos el siguiente código: 
 
1. 
2. 
3. 
4. 
5. function alcubo(numeroinIcial) { 
6. if (numeroinIcial == 1) { 
7. return "abcdef"; 
8. } else { 
9. return Math.pow(numeroinIcial,3); 
10. } 
11. } 
12. 
13. Ejemplo de funciones 
14. 
15. 
16. 
17. var elNum = 2; 
18. var finalNum = alcubo(elNum); 
19. if (isNaN(finalNum)) { 
20. alert("Usted debería saber que el 1, elevado a cualquier potencia es 1"); 
21. } else { 
22. alert("Cuando elevamos al cubo, " + elNum + " el resultado es: " + finalNum); 
23. } 
24. 
25. 
26. 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
114 
 
En primer lugar observe que usted puede colocar scripts tanto en las etiquetas , 
como en el cuerpo (). 
 
Ahora analicemos el código: 
 
Primera Parte 
 
1. 
2. function alcubo(numeroinIcial) { //Declaramos una función 
3. if (numeroinIcial == 1) { //Le decimos si el número inicial es 1 
4. return "abcdef"; //Conviértelo en un valor string o cadena 
5. } else { //Si no, eleva dicho numero al cubo 
6. return Math.pow(numeroinIcial,3); 
7. } 
8. } 
9. 
 
Este bloque sirve primordialmente para: 
 
 Definir la función “alcubo“ 
 La cual consta de dos............................................................................................................................................ 46 
Enlace Externo ................................................................................................................................................. 48 
REFERENCIAS CON ID Y CLASS ....................................................................................................................... 49 
Referencia por palabra clave del Elemento ................................................................................................... 49 
Referenciando con el atributo ID .................................................................................................................... 50 
Referenciando con el atributo CLASS ............................................................................................................. 50 
NUEVOS SELECTORES EN CSS3 ...................................................................................................................... 51 
Selectores por atributo ................................................................................................................................... 51 
not .................................................................................................................................................................... 51 
nth-child ........................................................................................................................................................... 52 
¿QUE PODEMOS HACER CON CSS3?.............................................................................................................. 53 
Colores Hexadecimal ....................................................................................................................................... 53 
Colores RGB y modo HSV ................................................................................................................................ 54 
EDICION DE TEXTO ........................................................................................................................................ 55 
VEAMOS COMO TRABAJAN LOS ESTILOS ....................................................................................................... 57 
Font-style ......................................................................................................................................................... 57 
Font-weight ...................................................................................................................................................... 57 
Text-decoration ............................................................................................................................................... 57 
Text-align.......................................................................................................................................................... 57 
Font-family ....................................................................................................................................................... 58 
Font-size ........................................................................................................................................................... 58 
ATRIBUTO BORDER ....................................................................................................................................... 59 
BACKGROUND ............................................................................................................................................... 60 
Paso a Paso ...................................................................................................................................................... 61 
POSICION FLOAT ........................................................................................................................................... 62 
Disposi ió e lo ue lo k ........................................................................................................................ 63 
Vista e dos olu as usa do float ............................................................................................................ 64 
PROPIEDAD MARGIN ..................................................................................................................................... 65 
PROPIEDAD PADDING ................................................................................................................................... 67 
TEXT-ALIGN ................................................................................................................................................... 69 
POSICION ABSOLUTA .................................................................................................................................... 71 
PSEUDO-CLASES ............................................................................................................................................ 72 
Hover: ............................................................................................................................................................... 72 
Focus: ............................................................................................................................................................... 73 
Active:............................................................................................................................................................... 73 
NUEVOS SELECTORES .................................................................................................................................... 74 
Selector por atributo: ...................................................................................................................................... 74 
Not: ................................................................................................................................................................... 74 
Índice 
 
Nth-child: ......................................................................................................................................................... 74 
Existen otras variantes para el selector nth-child: ......................................................................................... 75 
COLUMNAS ................................................................................................................................................... 75 
TEXT-STROKE ................................................................................................................................................ 76 
TEXT-SHADOW .............................................................................................................................................. 76 
MODELO CAJA FLEXIBLE ................................................................................................................................ 77 
DEGRADADOS ............................................................................................................................................... 79 
BORDES CON IMÁGENES ............................................................................................................................... 81 
Pasos para añadir un borde con imagen: ....................................................................................................... 81 
REFLEXIONES ................................................................................................................................................ 82 
BORDES REDONDEADOS ............................................................................................................................... 83 
SOMBRAS BOX SHADOW ............................................................................................................................... 84 
TRANSFORMACIONES ...................................................................................................................................partes, por un lado: 
 Cuando recibe un valor igual a 1 convierte dicho valor en la cadena “abcdef”. 
 De lo contrario, eleva dicho número al cubo. 
 
Segunda parte 
1. 
2. var elNum = 2; //Declaramos el valor de la variable elNum 
3. var finalNum = alcubo(elNum); //Declaramos el valor de la variable alcubo(), la cual 
ya hemos definido 
4. if (isNaN(finalNum)) { //Esto le dice, Si se trata de un valor no numérico 
5. alert("Usted debería saber que el 1, elevado a cualquier potencia es 1"); //Indica esto 
6. } else { //De lo contrario 
7. alert("Cuando elevamos al cubo, " + elNum + " el resultado es: " + 
finalNum);//Muestra esto 
8. } 
9. 
 
De esta manera: 
 Cuando el numero sea igual a 1 sera entonces una cadena, por lo tanto se mostrará la alerta 
de “Usted debería saber que el 1, elevado a cualquier potencia es 1“ 
 Y si no se trata de una cadena, es decir, se trata de un número, pasara por la función 
alcubo(); y aparecerá la alerta de: ” Cuando elevamos al cubo, ” + elNum + ” el resultado es: 
” + finalNum”, la cual emplea los operadores de concatenación (+), para incluir las variables. 
 
Al correr este script en su navegador usted verá: 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
115 
 
 
 
 
STRICT MODE 
En las especificaciones de ECMA-262, en su quinta edición, se ha introducido una variante para la 
redacción del código de JavaScript, se trata del modo estricto “strict mode” el cual permite disminuir 
la presencia de errores frecuentes, o interpretaciones erróneas del código. 
Por ejemplo, si el usuario no coloca la palabra reservada “var”, antes de la declaración de una 
variable se producirá un error. 
Además de algunas otras modificaciones a la función eval ( ), permiten mejorar la sintaxis del código 
escritas por el programador. 
La sintaxis que se emplea en el modo estricto de JavaScript, es muy parecida a la que se emplea en 
Perl. 
 
El modo estricto es de ámbito local, esto significa que: 
 
Puede ser habilitado el modo global, al implementar la línea “use strict”, al inicio del código. 
1. "use strict"; 
 
Puede ser habilitada de manera local para una función en específico, al ser colocada la línea “use 
strict” dentro del cuerpo de la función. 
 
1. function haceAlgo() { 
2. "use strict"; 
3. // aquí va el código. 
4. } 
 
Recuerde que al implementar el modo estricto, debe de usar una redacción completa, sin obviar 
palabras como var, como en el siguiente ejemplo: 
1. "use strict"; 
2. x = 4; // Produce un error de sintaxis 
 
En este ejemplo, se producirá un error. Cuando usted implementa el modo estricto la sintaxis tiene 
que ser la siguiente. 
1. "use strict"; 
2. var x = 4; // Esto está bien 
 
Alguna de las cuestiones más importantes que hacen del modo estricto algo importante, son las 
consideraciones que se han implementado para la función eval( ); 
La cual evalúa rigurosamente un valor “cadena”, que puede representar una sentencia o expresión 
de JavaScript. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
116 
 
VARIABLES NUMERICAS 
Cuando nos referimos a variables numéricas o valores numéricos nos referimos especialmente a 
números, así de simple. No tiene nada de especial, si usted tiene experiencia con otros lenguajes de 
programación, no sera un tema desconocido. Tanto los números enteros como los decimales. 
 
Cualquiera de estos valores es válido en JavaScript: 
 24 
 50.34 
 22 
 348 
 0.8654 
 Oxd 
El último ejemplo, es un valor hexadecimal. 
 
En JavaScript se pueden emplear diferentes bases de numeración aparte de la decimal, tales como 
la hexadecimal, binaria, Octal, por mencionar algunas de las más populares. Además se pueden 
realizar operaciones aritméticas entre ellos, sin importar en que base se encuentren: 
 
1. 
2. 
3. 
4. Operaciones con distintas Bases 
5. 
6. var h = 0xe; 
7. var i = 0x2; 
8. var j = h * i; 
9. alert(j); 
10. 
11. 
12. 
13. 
14. 
 
Al correr el script anterior en su navegador, verá que JS realizo la operación de multiplicación sin 
ningún problema, y el resultado es obtenido en base decimal, ya que es la que está establecida por 
defecto. 
 Lo primero que hace el script, es la declaración e inicialización de variabes. 
 Variable h 
 Variable i 
 Variable j (la cual contiene la operación realizada). 
 Finalmente hacemos uso de la función alert(), la cual lleva como argumento el contenido de 
la variable j 
 El resultado es una caja de texto que despliega el resultado de la operación anterior, en base 
decimal. 
 
Funciones numéricas 
JavaScript tiene algunas funciones y objetos incorporados, para trabajar con valores numéricos. 
Una función numérica comúnmente empleada es la función isNaN(). 
NaN es una abreviación de Not a Number, y representa un número inadmisible. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
117 
 
Utilice la función isNaN() para determinar si un número es legal o válido de acuerdo con la 
especificación ECMA-262. 
 
Por ejemplo: 
 
 Un número dividido por cero sería un número ilegal en JavaScript. 
 El valor de cadena “Este no es un número” obviamente, tampoco es un número. 
 Aunque las personas pueden tener una interpretación diferente de lo que es y no es un 
número, la cadena “four” no es un número a la función isNaN(), mientras que la cadena “4” 
si lo es. 
 La función isNaN() requiere un poco de yoga mental, ya que se emplea para comprobar el 
hecho negativo de si una variable contiene un número. 
 
Aquí hay un par de ejemplos en los que usted puede tratar de comprobar si un número es ilegal. 
Veamos el siguiente código: 
1. 
2. 
3. 
4. isNaN 
5. 
6. 
7. 
8. document.write("No es un número: " + isNaN("4")); 
9. 
10. 
11. 
 
Como puede observar, nos devuelve un resultado false, esto es por que “4”, aunque sea una cadena, 
SI es un número, por lo tanto al probar si NO era un número, nos dice “false”, ya que si es un número. 
 
Veamos otro ejemplo: 
 
1. 
2. 
3. 
4. isNaN 
5. 
6. 
7. 
8. document.write("No es un número: " + isNaN("four")); 
9. 
10. 
11. 
 
Como podrá observar, nos devuelve un resultado true, esto es por que “four”, aunque sea la manera 
de escribir “4”, NO es un número, por lo tanto al probar si NO era un número, nos dice “true”, ya que 
no es un número. Ahora nuestra variable, es totalmente una cadena. 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
118 
 
Constantes Numéricas 
Dentro de los objetos de JavaScript existen algunas constantes que están habilitadas de manera 
predeterminada en JavaScript. 
 
Constante Descripción 
Objeto 
JavaScript 
Infinity 
Valor que es mayor que el mayor número de punto 
flotante. Infinito negativo (-Infinity) es menor que el menor 
número de punto flotante. 
Global 
MAX_VALUE El mayor número que se puede representar en JavaScript. Number 
MIN_VALUE 
Número más cercano a cero que se puede representar en 
JavaScript. 
Number 
NaN 
Indica que una expresión aritmética ha devuelto un valor que 
no es un número. 
Number 
NEGATIVE_INFINITY Valor que es menor que el menor número de punto flotante. Number 
POSITIVE_INFINITY Valor que es mayor que el mayor número de punto flotante. Number 
 
Para ver como funcionan estos objetos, veamos algunos ejemplos. 
 
1. 
2. 
3. 
4. Constantes numé 
5. 
6. 
7. 
8. document.write(Number.MAX_VALUE); 
9. 
10. 
11. 
 
Objeto Math 
El objeto Math es una variante especial que se utiliza para trabajar con números en JavaScript, y 
tiene varias propiedades que son útiles para el programador, donde se encuentran incluidas todas 
las propiedades que devuelven el valor de pi, la raíz cuadrada de un número, una pseudo-número 
aleatorio, y un valor absoluto, por mencionar algunas. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
119 
 
Algunas propiedades son propiedades de valor, lo que significa que devuelven un valor, mientras 
que otros actúan como funciones y devuelven los valores basados en los argumentos enviados en 
ellos. 
Considere este ejemplo de la Math.PI el cual se trata de una propiedad de valor. 
1. 
2. 
3. 
4. Objeto Math 
5. 
6. 
7. 
8. document.write(Math.PI); 
9. 
10. 
11. 
 
En la siguiente tabla se muestran las propiedades valor del objeto Math. 
Constante Descripción 
Math.E Constante matemática e. Es el número de Euler, la base de los logaritmos naturales. 
Math.LN2 Logaritmo natural de 2. 
Math.LN10 Logaritmo natural de 10. 
Math.LOG2E Logaritmo en base 2 de e. 
Math.LOG10E Logaritmo en base 10 de e. 
Math.PI Pi. Es la relación entre la circunferencia de un círculo y su diámetro. 
Math.SQRT1_2 
Raíz cuadrada de 0,5 o, de forma equivalente, uno dividido entre la raíz cuadrada de 
2. 
Math.SQRT2 Raíz cuadrada de 2. 
 
 
En la tabla siguiente se muestran las funciones del objeto Math. 
 
Función Descripción 
Math.abs Devuelve el valor absoluto de un número. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
120 
 
Math.acos Devuelve el arcocoseno de un número. 
Math.asin Devuelve el arcoseno de un número. 
Math.atan Devuelve el arco tangente de un número. 
Math.atan2 
Devuelve el ángulo (en radianes) del eje X a un punto representado por las 
coordenadas y y x proporcionadas. 
Math.ceil 
Devuelve el menor entero que es mayor o igual que la expresión numérica 
especificada. 
Math.cos Devuelve el coseno de un número. 
Math.exp Devuelve e (la base de los logaritmos naturales) elevado a una potencia. 
Math.floor 
Devuelve el mayor entero que es menor o igual que la expresión numérica 
especificada. 
Math.log Devuelve el logaritmo natural de un número. 
Math.max Devuelve la mayor de dos expresiones numéricas especificadas. 
Math.min Devuelve el menor de dos números especificados. 
Math.pow Devuelve el valor de una expresión base elevada a una potencia que se especifique. 
Math.random Devuelve un número seudoaleatorio entre 0 y 1. 
Math.round Devuelve una expresión numérica especificada, redondeada al entero más cercano. 
Math.sin Devuelve el seno de un número. 
Math.sqrt Devuelve la raíz cuadrada de un número. 
Math.tan Devuelve la tangente de un número. 
 
recuerde que no es necesario aprender todo esto de memoria, es mas importante que sepa su 
existencia para cuando tenga en mente dar una instrucción sepa donde consultar. 
 
De todas formas, conforme pase el tiempo mas la practica todos estos elementos se harán más 
familiares. 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
121 
 
VARIABLES BOLEANAS 
Booleanos son una especie dato oculto o pasivo en JavaScript. Por oculto, o pasiva, quiero decir que 
no se trabaja con valores booleanos en la misma manera en que usted trabaja con cadenas y 
números, se puede definir y utilizar una variable booleana, pero por lo general usted sólo tiene que 
utilizar una expresión que se evalúa como un valor booleano. 
Booleanos sólo tienen dos valores, verdadero y falso, y en la práctica, rara vez se establecen las 
variables como tal. 
Los datos booleanos, se emplean generalmente para comprobar si una expresión if/then/else es 
verdadera o se cumple o no. 
 
1. 
2. 
3. 
4. 
5. 
6. 
7. 
8. If (miNumero 
12. 
13. 
 
Veamos un ejemplo en acción: 
 
var miEdad = 13; 
 
if(miEdad >= 18){ 
 document.write("Usted es mayor de edad") 
}else{ 
 document.write("Usted es menor de edad") 
} 
 
Una expresión booleana se utiliza para determinar si la evaluación es verdadera, y si es así se 
ejecuta un determinado código. Si el contenido de la variable de miNumero es mayor que 18, la 
expresión booleana será verdadera, de lo contrario, el booleana será falso. 
 
DATOS TIPO NULL 
Null es otro tipo especial de datos en JavaScript (como lo es en la mayoría de los idiomas). Null es, 
simplemente, nada. Representa y evalúa como false. 
Cuando un valor es nulo, no es nada y no contiene nada. Sin embargo, no hay que confundir esta 
nada con estar vacía. Un valor vacío o variable es todavía completa, es sólo llenos de vacío. 
El vacío es diferente de null, que es nada sencillo. 
 
var miVariable = ''; 
 
miVariable no es un valor null. 
 
 
JavaScript 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
122 
 
DATOS TIPO UNDEFINED 
 
Los datos “undefined” es un estado, aunque algunas veces es tomado como un valor, el cual 
representa a una variable a la que aun no se le ha asignado ningún valor. 
 
Este tipo es diferente a null, pero de igual manera, ambos pueden evaluar de igual manera. Mas 
adelante aprenderemos a distinguir con mayor lujo de de detalle entre los datos de tipo null y lo datos 
de tipo undefined, cuando veamos el uso de operadores y expresiones. 
 
En el caso de una variable no inicializada es undefined. Para esto decimos que la variable es de tipo 
Undefined.86 
TRANSISIONES Y ANIMACIONES .................................................................................................................... 88 
TRANSPARENCIAS ......................................................................................................................................... 90 
JavaScript .......................................................................................................................................................... 94 
INTRODUCCIÓN A JAVASCRIPT ...................................................................................................................... 94 
Primer script .................................................................................................................................................... 95 
COLOCAR JS CORRECTAMENTE ..................................................................................................................... 95 
Código en linea ................................................................................................................................................ 96 
Código embebido ............................................................................................................................................ 96 
Codigo externo ................................................................................................................................................ 97 
FUNCIÓN alert( ) ........................................................................................................................................... 97 
COMENTARIOS .............................................................................................................................................. 98 
Comentario de una línea: ................................................................................................................................ 99 
Comentario de varias líneas: ........................................................................................................................... 99 
DECLARACIÓN DE VARIABLES .......................................................................................................................100 
Declaración explícita .....................................................................................................................................100 
Declaración Implícita .....................................................................................................................................101 
NOMBRES DE VARIABLES .............................................................................................................................102 
VARIABLES LITERALES ...................................................................................................................................102 
Variables Literales ..........................................................................................................................................103 
Concatenaciones ...........................................................................................................................................103 
Métodos y Propiedades de datos literales ...................................................................................................105 
slice y substring..............................................................................................................................................105 
substr ..............................................................................................................................................................106 
concat .............................................................................................................................................................106 
toUpperCase y toLowerCase .........................................................................................................................106 
SECUENCIAS DE ESCAPE ...............................................................................................................................107 
COMILLAS SIMPLES Y COMILLAS DOBLES .....................................................................................................108 
PUNTO Y COMA ...........................................................................................................................................109 
Índice 
 
SENTENCIAS O EXPRESIONES .......................................................................................................................110 
Como está conformada una sentencia .........................................................................................................110 
Clasificación de las Sentencias ......................................................................................................................110 
ESPACIOS EN BLANCO E IDENTACIÓN ..........................................................................................................111 
Retorno de Carro o Salto de Línea ................................................................................................................112 
PALABRAS RESERVADAS ...............................................................................................................................112 
INTRODUCCIÓN A LAS FUNCIONES...............................................................................................................113 
Pongamos algo en práctica ...........................................................................................................................113 
Ahora analicemos el código: .........................................................................................................................114 
STRICT MODE ...............................................................................................................................................115 
El modo estricto es de ámbito local, esto significa que: .............................................................................115 
VARIABLES NUMERICAS ...............................................................................................................................116 
Funciones numéricas .....................................................................................................................................116 
Constantes Numéricas ..................................................................................................................................118 
Objeto Math...................................................................................................................................................118 
VARIABLES BOLEANAS ..................................................................................................................................121 
DATOS TIPO NULL ........................................................................................................................................121 
DATOS TIPO UNDEFINED ..............................................................................................................................122 
 
 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
6 
 
HTML5 
 INTRODUCCIÓN A HTML5 
La revolución de Internet, ha venido creciendo exponencialmente en la última década. El mercado 
de los dispositivos móviles inteligentes, han hecho que los programadores se pongan las pilas para 
aprovechar los elementos que las nuevas tecnologías proponen, y de esta manera ser competentes 
en un mundo laboral sumamente demandante. 
 
Para el día de hoy, la Web se constituye por sitios que funcionan como verdaderas aplicaciones 
dinámicas e interactivas. 
 
Los dispositivos móviles exigen la creación de sitios pensados NO únicamente para computadoras 
de escritorio, que va desde el desarrollo de sitios para escritorio, y sitios móviles, o la combinación 
de ambos, como los sitios responsivosy desde luego las aplicaciones nativas o híbridas que iremos 
conociendo poco a poco. 
 
PRINCIPIOS BÁSICOS EN HTML5 
Haga el código lo más limpio posible: 
Código HTML debe estar limpio y fácil de leer. No debe tener ninguna característica o elemento 
innecesari, y debe tener el formato de una manera que sea fácil de seguir. 
 
Estructura independiente de diseño: 
Utilice HTML para la estructura y emplee CSS para el diseño. 
 
Evitar el uso de tablas y marcos para el diseño: 
Estas técnicas fueron las mejores herramientas de los diseñadores web en un momento dado, sin 
embargo, el nuevo enfoque que proporciona CSS permite un código más limpio, el cual es más fácil 
de trabajar al dar una estructura visual. 
 
Comience con código válido: 
Muchas veces, una página se verá perfectamente bien, pero puede haber algún error oculto y al 
mostrar el trabajo al cliente nos encontramos con inconvenientes; por eso es mejor comenzar sus 
proyectos con HTML valido, también veremos como validar nuestros códigos para evitar estos 
contratiempos. Posteriormente veremos como validar nuestro documento en la siguiente dirección 
(http://validator. w3.org) 
 
Declaración del Documento: 
 La definición del tipo de documento para HTML4 o XHTML fue realmente complicado. Incluso las 
personas que impartían clases y escribieron libros sobre el tema tenían que copiar y pegar cada 
vez la declaración del documento. 
 
En HTML 5 tiene la definición del documento es sencilla y limpia, lo cual simplifica la escritura de la 
páginas web de memoria. 
 
El modo de definirla es: 
 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
7 
 
¿Qué es HTML5? 
 HTML es un lenguaje para describir las páginas web. 
HTML significa Hyper Text Markup Lenguaje 
HTML es un marcado lenguaje o un lenguaje de marcado es decir, emplea etiquetas o marcas para 
su sintaxis. 
Las etiquetas describen el contenido del documento. 
Los Documentos HTML son también llamados páginas web. 
 
Etiquetas HTML: 
 
Etiquetas HTML son palabras clave (nombres de etiqueta) rodeadas por corchetes angulares como 
. 
Etiquetas HTML normalmente vienen en pares como y . 
La primera etiqueta es la de inicio, la segunda etiqueta es la etiqueta de cierre. 
La etiqueta final se escribe igual que la etiqueta inicial, con una barra diagonal antes del nombre de 
la etiqueta . 
Etiquetas inicial y final son también llamadas etiquetas de apertura y etiquetas de cierre. 
 
¿Por qué HTML5? 
 
A lo largo de la evolución de HTML se fueron añadiendo cosas y quitando otras. Las especificaciones 
para su sintaxis fueron variando. En HTML5 encontramos la sintesis resultante de todo este proceso 
evolutivo. 
 
HTML5 no viene a remplazar HTML4 o XHTML, en realidad se trata de un concentrado de lo mejor 
da cada uno de estos estándares. Lo cual encontramos resumido en el siguiente listado: 
 
Declaración Simple: Como vimos anteriormente, la declaración de tipo de documento era 
increíblemente complicada antes de HTML5, ahora solo basta colocar al inicio del documento 
para que los navegadores reconozcan el tipo de estándar, es decir HTML5. 
 
Separación del contenido y el estilo: Esta práctica ya se venía dando desde XHTML, donde la 
separación del estilo (CSS3), funcionalidad (JS) y contenido (HTML5), permiten mejores prácticas 
para el desarrollo de sitios web. 
 
Soporte de Validación: La W3C pone a nuestra disposición un validador web, que permite revisar 
el uso correcto del estándar HTML5. 
 
El tradicional “Modo Estricto”: HTML5 se ajusta mas al tradicional modo estricto de XHTML, que 
a HTML4, es por ello que se puede seguir teniendo un código limpio y predecible para facilitar el 
desarrollo. 
 
Nuevas Capacidades: Desde luego HTML5 a través de las nuevas funcionalidades de CSS3 y JS 
propone un montón de nuevos recursos (API), que permiten el desarrollo de productos 
espectaculares, desde luego nos referimos a las API’s Drag and Drop, Canvas, Web Storage, 
Geolocalización, etc. 
 
 
 
 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
8 
 
ENTREMOS EN MATERIA 
Una página básica de HTML5 es muy fácil de construir. Sólo tiene que abrir un editor de texto y 
agregue el siguiente código: 
 
 
 
 
 
Primera Página 
 
 
 
Esto es un Título H1 
 
Esto es un Párrafo 
 
 
 
 
 
Editores de Texto 
 
Para escribir una página web, solo basta tener un editor de texto, el cual puede ser desde un simple 
Bloc de Notas o un editor profesional como: 
 
 
 
 
 
 
 
Pasos para Construir una PÁGINA WEB 
  Comience con el tipo de documento.  Las versiones modernas de HTML (XHTML y HTML5) tienen un atributo especial llamado el 
tipo de documento, lo que indica la forma en la que sera tratado el documento HTML5 por 
los navegadores. El tipo de documento para XHTML era muy confuso, y HTML 4 no tenía 
un DOCTYPE en absoluto.  Ahora en HTML5 basta con colocar esta etiqueta: , la cual define el tipo 
de documento.  La definición de tipo de documento debe estar en la primera linea de su sitio Web sin 
espacios o lineas que la precedan.  Si deja esto, probablemente pueda utilizar las funciones de HTML5, pero validadores tendrán 
que adivinar qué forma de HTML que está utilizando.  Añadir la etiqueta  Esta etiqueta especial indica el comienzo de una Web.  Lo mejor es indicar en qué idioma esta escrita la página con el atributo (lang=”es”) esto para 
el caso de español.  Los atributos se colocan dentro de la etiqueta de inicio, y constan de un nombre y un valor 
separados por un “=”. El valor del atributo puede permanecer sin entrecomillado si no 
contiene caracteres de espacio o cualquiera de” ‘` = . De lo contrario, tiene que ser 
citado con comillas simples o dobles. El valor, junto con el “=”, se puede omitir por completo 
si el valor es una cadena vacía. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
9 
 
 Asegúrese de tener la etiqueta de cierre correspondiente en la parte inferior de la 
página.  Una buena práctica es que cada vez que abramos una etiqueta la cerremos para evitar 
errores futuros (existen algunas excepciones de etiquetas nones o que no tienen par las 
cuales veremos posteriormente).  Crear un área de .  La cabeza es algo así como el compartimiento del motor de un coche.  La gente no suele ir allí, pero hay un montón de importantes funciones que ahi se realizan.  La cabeza está vacía en este simple ejemplo, pero se llenará con JavaScript y CSS 
pronto.  Especifique el juego de caracteres.  Si bien esto no es estrictamente necesario, se considera buena forma para que el navegador 
sepa qué tipo de caracteres se utilizarán al mostrar nuestra página.  Páginas escritas en Inglés general y en nuestro caso Español, debe utilizar UTF-8, el cual 
se especifica con el siguiente código: .  Tabule su código.  A los navegadores no les importa si su código contiene sangrías, pero es un muy buen hábito 
para facilitar la lectura del código.  Añadir comentarios.  Los comentarios no son estrictamente necesarias, pero nos son de mucha utilidad para 
realizar pequeñas anotaciones que nos faciliten la lectura de nuestro código.  Comentarios en HTML empiezan con .  Los comentarios pueden durar varias líneas.  Poner en un título con y .  Esta etiqueta permite especificar un título de su página.  El título lo general aparece en la barra de título del navegador Web, y También suele 
aparecer en los resultados del motor de búsqueda para tu página.  Incluya la mayor parte de la página en las etiquetas .  Si el área de la cabeza es la del compartimiento del motor, el cuerpoes el espacio para los 
pasajeros.  El cuerpo tendera la parte visible de la página web.  La etiqueta suele ser justo antes de la etiqueta , y después de la etiqueta 
.  Utilice etiquetas de encabezado para describir su esquema.  La etiqueta es un ejemplo de un encabezado.  Todas las etiquetas de título comienzan con h seguido de un número que indica su jerarquía.  Los niveles de encabezado van desde el h1 hasta el h6.  Coloque la mayor parte del texto en párrafos.  Aunque HTML no requiere el uso de etiquetas de párrafo para colocar texto, siguen siendo 
una muy buena idea que coloque cada párrafo dentro de y  Guarde el archivo con la extensión html.  Asegúrese de guardar el archivo con la extensión (.html). 
 
 
INSERTAR IMÁGENES 
Código para insertar IMÁGENES: 
 
1. 
2. 
3. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
10 
 
4. Inserción de Imágenes 
5. 
6. 
7. 
8. Imagen de Muestra 
9. 
10. 
11. 
12. 
13. 
 
 
Para este código, debe tener una imagen guardada en la dirección donde esta alojada su página. 
En este ejemplo la imagen se llama (codigoaccion) y su extensión es (.jpg) 
Cuando tenemos mas de una imagen en nuestro sitio, es una buena práctica tenerlas almacenadas 
en una carpeta específica, generalmente llamada (img). 
Para indicarle al navegador que entre a una determinada carpeta, se pone el nombre de la carpeta 
antes del nombre de la imagen. 
 
Pasos para Añadir IMÁGENES: 
  Identificar la imagen que desea utilizar. Por supuesto, usted tiene que tener acceso a la 
imagen antes de poder utilizarlo. Asegúrese de que tiene permiso para poder utilizar la 
imagen en su sitio.  Modificar la imagen si es necesario. Es posible que necesite ajustar la imagen para su uso 
en la página. Lo mejor es cambiar el tamaño de las imágenes antes de que se utilicen en la 
Web.  Elija el tipo de imagen. Los Navegadores Web pueden mostrar .jpg .gif y .png. Si la imagen 
está en otro formato, es mejor que busque un editor de imágens que le permita convertir la 
imagen a alguno de estos tipos  Ponga su imagen en el lugar correcto. El archivo de imagen debe estar en el mismo directorio 
que el archivo HTML. De esta manera, al publicar su página en el servidor, la imagen 
permanecerá en su lugar.  Construye tu página de forma normal. La imagen se coloca con una etiqueta integrada en el 
cuerpo.  Utilice la etiqueta para indicar la imagen. Esta etiqueta debe ser incorporada dentro 
de un párrafo o div para no tener problemas en la validación.  Utilice el atributo src para indicar el archivo que contiene la imagen. Si el archivo de la imagen 
está en el mismo directorio que la página Web, todo lo que necesita es el nombre de la 
imagen, si esta en una carpeta, nombre la carpeta como se muestra en el ejemplo y si el 
archivo de la imagen está en otra parte de Internet, puede utilizar la URL completa que posee 
la imagen 
 
  Para entrar a una carpeta independiente llamada (img) se separa el nombre de la carpeta y 
el nombre de la imagen por una barra diagonal. 
1.  Para el URL absoluto de una imágen puede emplear el siguiente código 
2. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
11 
 
 Incluya el atributo alt: El atributo alt contiene texto que describe la imagen y mejora su 
posicionaminto.  Poner fin a la etiqueta de imagen con un /. La etiqueta img es una etiqueta especial que no 
posee una etiqueta de cierre. El carácter de barra al final de la etiqueta indica que la etiqueta 
es impar y sirve como su propia etiqueta final. 
 
 
VÍNCULOS 
Los hipervínculos son más de lo que parecen. Ellos muestran el texto en la página, pero cuando el 
usuario hace clic en el texto, el navegador carga una página diferente en el Internet. 
 
Codigo para Añadir o Crear VÍNCULOS 
 
1. 
2. 
3. 
4. Vinculos || links 
5. 
6. 
7. 
8. Crear Vínculos 
9. Vínculo Relativo a una Imagen 
10. 
11. Este es el texto que vincula con la imagen del logo del Colegio al dar clic aqui 
12. 
13. Vínculo Absoluto a una URL 
14. 
15. Este vínculo, los envia a la 
Página de Facebook de Profr. 
Allan 
16. 
17. 
 
 
Para este ejemplo, necesita tener una imagen contenida en una carpeta llamada (img) dentro del 
directorio donde se encuentra su documento html. 
En el caso del segundo Vínculo, los dirige a mi página de Facebook, de paso me agregan. 
 
 
Pasos para crear hipervínculos: 
  Comience con una página normal. Los enlaces, generalmente son integrados directamente 
en su página.  Utilice la etiqueta para indicar un enlace. La “A” proviene de su definición en ingles 
anchorque significa ancla.  Utilizar el atributo href (hypertext reference). 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
12 
 
 El href puede ser relativo o absoluto  Relativo: El href puede ser un simple nombre. 
1. Si se vincula a un archivo que esté en el mismo directorio que la página Web, usted 
puede simplemente indicar el nombre del archivo. 
2. Esto se conoce como una referencia relativa debido a que el navegador asume que 
el archivo vinculado está en el directorio actual. 
3. En el primer ejemplo, el vinculo de la imagen apunta hacia una carpeta llamada 
(img), que esta dentro del directorio y después a la imagen llamada (cecytem.jpg).  Absoluto: El href también puede ser una dirección Web completa. 
1. Si lo prefiere, usted puede dar toda la dirección de un sitio Web. 
2. Esto se conoce como referencia absoluta, ya que explica cómo encontrar el 
archivo, independientemente de la ubicación de la página actual. 
3. Coloque el texto que será visible en el cuerpo entre la etiqueta y . 
Cualquier texto que aparece entre las etiquetas y etiquetas se 
mostrarán en la pantalla en un formato predefinido que lo indica como un 
enlace. 
 
El formato por defecto de un enlace es texto azul subrayado, pero usted encontrar la manera de 
cambiar eso haciendo uso de CSS3 posteriormente. 
 
 
LISTAS 
Las páginas son a menudo acerca de datos, y los datos se organizan con frecuencia en las listas. 
 
Codigo para crear LISTAS: 
 
1. 
2. 
3. 
4. Listas 
5. 
6. 
7. 
8. Idiomas 
9. 
10. Español 
11. Ingles 
12. Ruso 
13. 
14. Listas Ordenadas 
15. 
16. Uno 
 
17. Dos 
18. Tres 
19. 
20. Lista sobre otra lista 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
13 
 
21. 
22. Español 
23. 
24. uno 
25. dos 
26. tres 
27. 
28. 
29. Japanese 
30. 
31. ichi 
32. ni 
33. san 
34. 
35. 
36. 
37. 
38. 
 
 
Pasos para cobtruir una LISTA: 
 
Las listas, como la mayoría de los elementos HTML, son muy fáciles de construir. Designar al principio de la lista con o .  La etiqueta indica una (única) lista desordenada, la cual aparece con viñetas  La etiqueta se utiliza para describir una lista ordenada.  Cuando se utiliza CSS para dar esilo a las listas, se pueden tener muchos tipos diferentes 
de marcas, incluyendo números, Números romanos, viñetas, o gráficos personalizados.  Marque cada elemento con una par.  La etiqueta se utiliza para indicar un elemento de la lista. Todos los elementos de la lista 
deben estar incluidos en los elementos . (Opcional) Una lista dentro de otra lista.  El de una lista puede contener toda una lista nueva. Esta es la técnica utilizada para 
construir las listas anidadas en el último ejemplo. Sólo asegúrese de cerrar una lista antes 
de iniciar una nueva. Tabulación adecuada, ayuda a mantener un registro de lo que está 
anidado. 
 
TABLAS 
Codigo para crear TABLAS: 
 
1. 
2. 
3. 
4. Tabla 
5. 
6. 
7. table, td, th { 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
14 
 
8. border: 1px solid black; 
9. } 
10. 
11. 
12. 
13. Ejemplo de Tabla 
14. HTML Superheroes 
15. 
16. 
17. Hero 
18. Power 
19. Nemesis 
20. 
21. 
22. The XMLator 
23. Standards compliance 
24. Sloppy Code Boy 
25. 
26. 
27. Captain CSS 
28. Superlayout 
29. Lord Deprecated 
30. 
31. 
32. Browser Woman 
33. Megacompatibility 
34. Ugly Code Monster 
35. 
36. 
37. 
38. 
 
Pasos para crear tablas: 
 
Al examinar el código, se puede ver que una tabla, es simplemente un conjunto etiquetas anidadas.  Planifique su primera tabla. 
1. Es mucho más fácil construir una tabla en HTML si ya sabemos cómo va a estar 
estructurada. Usted debe saber cuántas columnas tendrá, y qué filas o columnas 
serán titulares. 
2. Es una buena idea esbozar su tabla en papel si no está seguro de estas cosas.  Comience la tabla con la etiqueta . 
1. La etiqueta y par, encierra toda la tabla.  Crear un registro de la tabla con . 
1. La tabla se define con una serie de filas. Utilice la par, para encerrar 
cada fila de datos.  Coloque los elementos titulares de la tabla entre las etiquetas y . 
1. A menudo, la fila superior contendrá los encabezados, (a veces la columna 
izquierda también lo hará). 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
15 
 
2. Utilice las etiquetas y par, para indicar que texto debe ser tratado 
como una celda de encabezado. 
3. Por defecto, el texto de estas columnas aparecen centradas y en negritas, pero 
eso se puede cambiar con CSS.  Especifique las celdas de datos comunes con las etiquetas y . 
1. El par, se utiliza para especificar una celda de datos ordinaria. La 
mayoría de las células de la tabla se especifica mediante etiquetas td.  Mantener el número de céldas consistente. 
1. Cada fila debe tener el mismo número de columnas. (Aunque hay técnicas que 
permiten ampliar una columna, lo cual veremos posteriormente)  Añadir CSS según sea necesario. 
1. Tablas tienen un formato básico, pero como de costumbre, usted puede cambiar 
las cosas con CSS.  He añadido estilos para el borde de este ejemplo, aunque es muy básico.  No utilice tablas para maquetar. 
 
Las primeras versiones de HTML no tenían suficiente apoyo para el diseño (creación de columnas y 
diseño de página). Antiguamente los diseñadores empleaban las tablas para dar una determinada 
estructura, lo cual ya no es un recurso eficiente ni pensable en la práctica profesional. 
 
 
FORMULARIOS 
Desde sus inicios las páginas web han tenido la capacidad de recopilar datos de los usuarios. HTML5 
tiene un conjunto estándar bastante útiles para esta tarea. No se puede hacer nada con los datos en 
HTML plano, pero de esto nos ocuparemos después con JavaScript y PHP. 
 
Codigo para crear FORMULARIOS: 
 
1. 
2. 
3. 
4. Formulario 
5. 
6. 
7. 
8. Ejemplo de Formulario 
9. 
10. 
 
11. Introducir Texto 
12. 
13. Caja de Texto 
14. 
15. 
16. 
17. Password 
18. 
19. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
16 
 
20. 
21. Área de Texto 
22. Introduce tu texto 
aquí... 
23. 
24. 
25. 
26. Selectores 
27. 
28. Lista de Opciones 
29. 
30. uno 
31. dos 
32. tres 
33. cuatro 
34. 
35. 
36. 
37. Casillas de verificación 
38. 
39. SI 
40. 
41. NO 
42. 
43. 
44. Botones en Radio 
45. 
46. Si 
47. 
48. Tal vez 
49. 
50. No 
51. 
52. 
53. 
54. Botones 
55. 
56. Boton Estandar 
57. 
58. 
59. 
60. 
61. 
62. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
17 
 
63. 
64. 
 
Como puede ver, los elementos de formulario siguen muchas de las mismas reglas que hemos visto 
hasta ahora, pero, para las etiquetas de los formularios, hay algunas diferencias. 
Veamos las etiquetas que se emplean generalmente para la construcción de formularios:  : La etiqueta es la etiqueta que contiene el formulario. La etiqueta 
también debe incluir el atributo (action = “”), esto le indica al navegador que no va a llamar a 
un script del lado del servidor cuando se envía el formulario. Este atributo lo veremos 
específicamente mas adelante.  : Esta es una etiqueta especial que le permite agrupar una serie de elementos de 
un formulario. No es necesario, pero puede hacer que las formas mas complejas de 
formularios sean más fáciles de navegar. Por defecto, un fieldset tieneun borde a su 
alrededor, pero usted puede cambiar esto con CSS. Generalmente esta se ocupa junto con 
.  : Sirve para colocar una leyenda en nuestro capo de . Esto le permite dar 
información extra sobre el formulario. 
1. 
2. 
3. Mi Formulario 
4. 
5. 
6. 
  : La etiqueta define una etiqueta para un elemento . 
 
El fieldset, legend, y label no son necesarios, y francamente, no se utilizaron mucho en las formas 
anteriores de HTML. Estas etiquetas se utilizan con mayor frecuencia en XHTML y HTML5, donde 
el uso de tablas para organizar la distribución física de la página no se recomienda. 
Estas etiquetas ayudan a organizar la página de modo que es más fácil para diseñar con CSS. 
El uso adecuado de estas etiquetas y CSS a menudo hace que sus formularios sean mucho más 
fácil de trabajar que los hacks basados en tablas. 
 
Comencemos estudiando los principales elementos de los formularios: 
 
Entradas de texto “TEXT INPUT” 
 
Muchos de los elementos del formulario se basan en la etiqueta de entrada. 
 
Atributo (type = ” “): El atributo (type) se utiliza para determinar qué tipo de elemento se creara en la 
página. Por el momento, el elemento de entrada”” más común es el cuadro de texto básico. 
Su código es el siguiente: 
 
1. 
 
Pasos para construir la entrada de Texto “Text Inputs” 
  Crear un elemento de entrada “”. La etiqueta crea la estructura general del 
elemento.  Ajuste el tipo de “texto” (type). Esto indica que usted está construyendo un elemento de texto 
estándar, no algo más elaborado. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
18 
 
 Añadir un atributo id. El atributo id le permite nombrar el elemento. Esto será muy importante 
a la hora de agregar JavaScript a la página, ya el código JavaScript utiliza el ID para extraer 
los datos del formulario.  Añadir los datos por defecto. Usted puede agregar los datos por defecto si lo desea, 
utilizando el atributo (value). Cualquier texto que se coloca en el valor se convertirá en el 
valor predeterminado del formulario. 
El elemento de texto coloca una pequeña caja en la pantalla. Cuando el usuario selecciona la caja 
de texto, permite que introduzca texto al formulario. 
Por supuesto, si usted quiere hacer algo con este texto, tendrá que escribir algún código con JS que 
posteriormente veamos. Recuerde que HTML solo da la estructura y el funcionamiento se lo daremos 
con JS. 
 
Crear un campo PASSWORD: 
 
Para crear nuestro campo de Password debemos emplear el siguiente código: 
 
 
 
Pasos para crear campo PASSWORD: 
 
1. El elemento de entrada “” estándar tiene una prima que se utiliza a veces, llamada 
password o contraseña. 
2. El código de la contraseña se parece mucho al código de una entrada estándar elemento. 
3. El campo de la contraseña es muy similar al campo de texto normal, pero tiene una diferencia 
primaria. Cuando el usuario escribe datos en el campo de texto, el contenido del campo se 
sustituye por asteriscos. 
4. Esto evita que los secuaces del mal, al mirar sobre sus hombros pueda descubrir su 
contraseña. 
5. El campo de contraseña no proporciona ninguna seguridad real. Cuando se utiliza para 
enviar una petición a un servidor web, esa solicitud se envía normalmente en la URL, donde 
los secuaces del mal estarán seguros de encontrarla. Para fines de seguridad y de mantener 
nuestros secretos guardados emplearemos unos trucos diferentes que posteriormente 
veremos. 
 
Crear caja de texto multilinea “TEXTAREA” 
 
A veces tendrás la posibilidad de introducir varias líneas de texto. El área de texto es perfecto para 
esta situación. Su sintaxis es un poco diferente del elemento de entrada que has visto hasta ahora. 
 
Código para crear caja de texto “TEXTAREA”: 
 
1. Tu texto Aquí 
 
Pasos para crear el “TEXTAREA”: 
 
1. Comience con la etiqueta . Esta etiqueta indica el comienzo de una caja multilínea 
de texto. 
2. Especifique el número de filas mediante el atributo (rows = ” “). Este atributo especifica el 
largo de la caja 
3. Indique el número de columnas mediante el atributo (cols =” “). El número de columnas 
especifica en ancho (en caracteres) del cuadro de texto. 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
19 
 
Crear una LISTA DESPLEGABLE  Las listas desplegables son una característica común en las páginas Web ya que son 
agradables y permite al programador especificar una serie de opciones además de no 
requerir una gran cantidad de espacio en pantalla.  Las opciones son visibles sólo cuando el usuario los selecciona.  Al tener opciones limitadas, hace que la respuesta sea más simple de analizar.  Cuando se permite que el usuario escriba información en un formulario, puede ser muy difícil 
comprobar todas las cosas locas que el usuario puede introducir. Con una lista de opciones, 
que ya ha predeterminado todas las respuestas posibles. Hay menos probabilidad de que 
algo pueda salir mal.  En HTML / XHTML, las listas desplegables se crean con dos tipos de objetos.  La estructura general utiliza las etiquetas , mientras que cada una de las posibles 
opciones tiene su propia etiqueta llamada . 
 
Codigo para crear una LISTA DESPLEGABLE: 
 
1. 
2. uno 
3. dos 
4. tres 
5. cuatro 
6. 
 
Pasos para crear una LISTA DEPLEGABLE: 
 
1. Crear el elemento primero. El contenedor de la lista será un elemento SELECT. La 
lista completa está encerrada en el par. 
2. Dar al elemento select una identificación. Usted utilizará este ID para hacer referencia al 
elemento en el código. 
3. Añadir un elemento de opción para el elemento select. 
4. Dé a cada etiqueta de opción un valor. El valor será la respuesta enviada a un programa 
cuando el usuario elige una opción. El usuario no verá necesariamente el valor. 
5. Indica el texto que verá el usuario. El texto que el usuario verá para la opción que va entre 
la etiqueta y . Esto puede ser diferente al valor que enviaremos al 
programa (JS, PHP, etc.), o el mismo. 
6. Añadir tantas opciones como desee. 
 
Crear CAJA DE VERIFICACIÓN 
 
A veces se tiene algún tipo de información que puede ser verdadera o falsa. El elemento de casilla 
es perfecto para este tipo de entrada ya que el usuario puede hacer clic para activar o desactivar la 
opción. Las casillas de verificación son otra variante de la versatilidad de etiqueta en HTML5. 
 
Código para crear una CAJA DE VERIFICACIÓN: 
 
1. 
2. Casillas de verificación 
3. 
4. SI 
5. 
6. NO 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
20 
 
7. 
 
Pasos para crear una CAJA DE VERIFICACIÓN: 
 
1. Comience con un elemento de entrada “”. Las casillas de verificación son sólo otra 
forma de elementos de entrada. 
2. Establezca el atributo (type). Esto aclara que el elemento de entrada será una casilla de 
verificación. 
3. Dale al elemento un identificador (id). Al igual que todos los elementos del formulario, tendrá 
un campo de identificación para que su código pueda trabajarse directamente con el 
elemento. 
4. Especifique un valor. Se puede asignar un valor a una casilla de verificación. El usuario no 
verá el valor. 
5. Agregar una etiqueta . Las casillas necesitantener una etiqueta asociada a ellas, 
para que el usuario entienda de que se trata la casilla. La etiqueta de una casilla de 
verificación se aplica generalmente a la derecha de la casilla de verificación. 
6. Agregue el atributo (for) a la etiqueta. La etiqueta tiene un atributo especial llamado (for), 
que le permite especificar qué elemento de entrada corresponde a la casilla. 
7. Coloque el valor del id de la casilla de verificación a este atributo de la etiqueta, esto será 
útil para casillas de verificación, debido a que en la mayoría de los navegadores el usuario 
puede hacer clic en cualquiera de las etiquetas o en la casilla de verificación para activar la 
selección. 
Asociar la marca a la casilla de verificación le da al usuario un blanco más grande para poder hacer 
clic, y hace que sea una forma más fácil de usar. 
 
Crear un campo de opción “BOTON DE RADIO” 
 
En la superficie, los botones de radio se parecen mucho a las casillas de verificación, pero son 
diferentes en varios aspectos. 
Los botones de opción se colocan sólo en grupos. Usted puede tener una sola casilla de verificación 
en un formulario, como vimos en el ejemplo anterior, pero los botones de radio o de opción sólo 
tienen sentido cuando se colocan en grupos. 
Se selecciona solo un elemento de un grupo de opciones. En un grupo de botones de radio, al 
seleccionar un botón se anula la selección de los demás. Es como una radio de coche, donde 
haciendo clic en uno de los botones de memorización anula la selección de los demás. 
Siempre debe haber un elemento seleccionado. Cuando se construye un campo de opción, siempre 
se debe hacer que un elemento del grupo esté seleccionado. De lo contrario podría ocasionar 
problemas cuando empleamos JS. 
La identificación (id) de cada botón de radio sigue siendo único. Cada Identificación en una página 
Web debe ser único, y los elementos de identificación de cada botón de opción seguirán el mismo 
principio. 
Cada elemento de radio también tiene un atributo de nombre (name). Se utiliza el atributo de nombre 
para especificar todas las casillas de opciones que pertenecen al mismo grupo 
Todos los botones de opción de un grupo tienen el mismo nombre. HTML utiliza el nombre del 
atributo para averiguar que botón de un grupo esta seleccionado y solo permitir que se seleccione 
una sola opción. 
 
Codigo para crear un elemento de opción o “BOTON DE RADIO”: 
 
1. 
2. Botones en Radio 
3. 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
21 
 
4. Si 
5. 
6. Tal vez 
7. 
8. No 
9. 
 
Pasos para crear un elemento de opción o “BOTON DE RADIO”: 
 
1. Empiece por crear un elemento de entrada “”. Como de costumbre, el elemento de 
entrada proporciona el fundamento básico. 
2. Ajuste el tipo de radio. Utilice el atributo de tipo (type) para formar botones de radio. 
3. Dé a cada elemento un identificador único (id). Como es habitual, aplicar un identificador 
único para cada botón de radio. 
4. Dar a todos los botones de un mismo grupo el mismo nombre en el atributo (name =” “) 
nombre. Utilice el atributo de nombre (name) para identificar los botones de un mismo grupo. 
5. Considere la posibilidad de agrupación visual. El usuario no será capaz de decir qué botones 
son parte de un grupo. Puede ser que sea mejor utilizar fieldsets u otros trucos de formato 
para ayudar al usuario a saber qué botones se encuentran en un mismo grupo. Todos los 
botones de un grupo deben estar físicamente cerca uno del otro. 
6. Hacer que uno de los botones este seleccionado con el atributo (checked = “checked”) de 
forma predeterminada. 
 
 
BOTONES DE ACCION: 
 
Uno de los elementos más críticos en el formulario es el botón omnipresente. Hay tres principales 
tipos de botones: 
 
Botón Estandar: un botón estándar sólo se parece a un botón. Estos botones por lo general se utilizan 
en la programación de JavaScript para activar algún tipo de acción en el cliente. 
Botón Enviar: Este botón se utiliza normalmente en la programación del lado del servidor. Se envasa 
de todos los datos en el formulario y lo envía a un programa que vive en un servidor web remoto 
para ocupar los datos. 
 
 
Botón Reset: Este tipo botón especial tiene una función de comportamiento. Cuando el usuario hace 
clic en un botón de reset, todos los datos en el formulario se restablecen a sus valores 
predeterminados originales. 
 
Construcción de los BOTONES: 
 
1. 
 
Cuando se utiliza de esta manera, el valor de la propiedad se convierte en la etiqueta del botón, y la 
propiedad type indica el tipo de botón que tiene la intención de construir. 
No es necesario añadir una etiqueta a un botón porque la etiqueta está implícita. 
Esta es la forma original de crear los botones en HTML, y es todavía comúnmente utilizada. Pero los 
botones no se utilizan realmente para la entrada, sino que son utilizados para especificar que el 
usuario quiere hacer algo. Por esa razón, una nueva sintaxis del botón ha evolucionado a: 
 
1. Botón Estándar 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
22 
 
Esta sintaxis introduce una etiqueta de botón con inicio y fin. El atributo de tipo se utiliza para indicar 
el tipo de botón que desee utilizar. El valor predeterminado es “Enviar” o “Submit”, utilizado 
principalmente en el desarrollo del lado del servidor, que no es el foco de este curso. El texto dentro 
del botón indica el texto impreso en el botón. 
 
NUEVOS ELEMENTOS EN FORMULARIOS HTML5 
Elemento datalist 
 
El elemento , permite al desarrollador colocar una lista de sugerencias para un elemento 
“input”, de tal manera que cuando el usuario coloque texto en el campo, las sugerencias aparezcan 
y el pueda elegir una de ellas. 
 
1. Nombre del Curso 
2. 
3. 
4. 
5. 
6. 
7. 
8. 
 
Elemento keygen 
 
El elemento , cifra algún dato para subirlo al servidor. Aunque podría parecer un 
método de seguridad, es aun un tema muy debatido donde algunos expertos señalan que este 
método de encriptación es poco seguro. Incluso la permanencia de dentro del 
estándar de HTML5 es dudosa. 
 
1. keygen 
2. 
3. 
 
 
Este elemento recibe dos parámetros: 
 
1. kaytype: Especifica el tipo de encriptación, (“rsa” es la especificación estándar). 
2. challenge: Es la cadena que pasara con la dirección pública, generalmente es especificada 
por el servidor. 
 
Elemento meter 
 
El elemento indica un valor numérico que está comprendido en un rango. La etiqueta meter 
se emplea para indicar el valor de salida de un número. 
 
1. 
2. A 
3. 
4. 
 
HTML5 
 
 
ING. ALLAN EMMANUEL LÓPEZ MÁRQUEZ 
DESARROLLO DE APLICACIONES WEB 
23 
 
El elemento meter soporta una serie de atributos: 
  value: Indica la representación numérica de manera gráfica de la etiqueta meter.  max: Representa el valor máximo que puede contener la etiqueta meter  min: Indica el mínimo valor posible.  high: si el valor se puede definir como un rango, el atributo high representa el fin mas alto de 
dicho rango.  low: si el valor se puede definir como un rango, el atributo low representa