Módulo 2 HTML5

Curso: HTML 5
Créditos 3
Académicos:
Módulo 2 HTML, CANVAS- FORMULARIOS-HOJAS DE ESTILO CSS
Autor Duver Rene Acosta Orjuela
INTRODUCCION
El curso HTML5 (HyperText Markup Language) forma parte de las asignaturas de IV

semestre de Ingeniería de Software de la Universidad Manuela Beltrán, el siguiente
modulo es la continuación sobre el fascinante mundo de HTML5, contiene temas muy
importantes para el desarrollo de páginas y sitios web, es importante mencionar que
no todos los navegadores web soportan HTML5 por lo tanto se recomienda actualizar
o descargar las últimas versiones, para ello podemos visitar los siguientes sitios web:
 https://www.google.com/chrome
 https://www.mozilla.org/es-ES/firefox/new/?scene=2#download-fx
 https://www.apple.com/es/safari/
 http://www.opera.com/es
 http://windows.microsoft.com/es-CO/internet-explorer/download-ie
Figura 1 HTML5 y CSS3

Fuente: (2010) http://feedgrids.com/originals/images/uploads_post/html5_CSS3.jpg
En la primera parte del módulo hablaremos sobre la etiqueta <canvas> y el manejo

básico de la misma, la cual aparece en HTML5 como un lienzo en el cual se pueden
insertar imágenes, dibujar gráficos, y con programación de JavaScript crear
animaciones e incluso procesar video en tiempo real.
En la segunda parte del módulo vamos a aprender a implementar elementos y atributos
para desarrollar formularios, teniendo en cuenta que con HTML5 se realizan de forma
más práctica e intuitiva para el desarrollador y se muestra de manera más estable para
el usuario final.
En la tercera parte iniciamos el trabajo con las hojas de estilo en cascada CSS
(Cascading Style Sheets) donde hablaremos de su historia, evolución e
implementación en nuestras páginas y sitios web, para iniciar solo necesitamos una
dosis de dedicación y para aprender y practicar.
COMPETENCIAS
 Desarrollar habilidades para crear formularios dinámicos en un sitio web

 Dominar conceptos técnicos para crear sitios web utilizando herramientas de
producción con estilos CSS.
 Tener clara la estructura y la capacidad de organizar y planificar un proyecto
informático orientado al desarrollo Web.
 Aplicar los requerimientos del diseño y operatividad en la página web, cumpliendo con
lo exigido por las normas técnicas.
 Desarrollar una creatividad constante frente al fascinante mundo del desarrollo Web.
ESTRUCTURA TEMATICA
TABLA DE CONTENIDO
1. CANVAS ............................................................................................................... 5
2. FORMULARIOS EN HTML5 ................................................................................. 8
2.1 LOS FORMULARIOS <form>: ...................................................................... 8
2.1.2 Atributos de la Etiqueta <form>: ................................................................. 9
2.2 ETIQUETA <input>: ....................................................................................... 9

2.2.1 Atributos de la Etiqueta <input> ................................................................ 10
3 HOJAS DE ESTILO EN CASCADA .................................................................... 14

3.1 DECLARAR ESTILOS CSS DENTRO DEL ELEMENTO............................ 14
3.2 ESTILOS CSS EN HEAD O CABECERA .................................................. 14
4 HOJA DE ESTILO EXTERNA. ............................................................................ 17
5 REGLAS CSS. .................................................................................................... 21
5.1 REFERENCIAS POR LA PALABRA CLAVE DEL ELEMENTÓ. .................. 22
5.2 REFERENCIAS POR EL ATRIBUTO ID. .................................................... 22
5.3 REFERENCIAS POR ATRIBUTO CLASS ................................................... 23
5.4 SELECTOR POR ATRIBUTO: .................................................................... 25
5.5 TEXTO EN CSS3 ......................................................................................... 31
6. MODELO DE CAJA ............................................................................................ 35
6.1 FUNCIÓN DE MODELO DE CAJA .............................................................. 36
6.2 MARGIN Y PADDING ................................................................................... 38
6.3 EMPLEAR SOMBRA A UNA CAJA............................................................. 40
MATERIAL DE APOYO ............................................................................................. 43
GLOSARIO................................................................................................................ 44
WEBGRAFÍA. ............................................................................................................ 46
BIBLIOGRAFIA ......................................................................................................... 47
IDEOGRAMA CANVAS Y FORMULARIOS
HTML5
form input
get Action
canvas Type
post Method Src
Name Value
Target Step
Accept- Requiered
charset
Placehoder
Auto-
complete
Figura 2, Ideograma
Fuente: Elaborada por el Autor
IDEOGRAMA CSS
REGLAS
Declaracion Declaracion
head elemento
css
Texto CSS Externa
Figura 3, Ideograma CSS

1. CANVAS
Es un elemento o zona acotada por el diseñador (el diseñador define las dimensiones
del mismo) donde puede insertar, gráficos, texto, imagen, animaciones etc. Dentro de
la página web, podemos asimilarlo al lienzo de un pintor elemento o herramienta donde
puede dibujar.
“El canvas se desarrolló inicialmente por Apple para su navegador Safari y luego fue
utilizado y estandarizado por la organización WHATWG para incorporarlo a HTML 5.
Posteriormente también ha sido adoptado por navegadores como Firefox y Opera,”
recuperado el 1 de abril de 2015, de (desarrolloweb.com, 2015)
Es recomendable actualizar los navegadores para que la etiqueta <canvas> funcione

perfectamente.
Esta etiqueta se debe insertar dentro de la

etiqueta <body> y en este primer ejemplo
iniciamos nuestro trabajo con el dibujo de un
rectángulo, vamos a insertar una etiqueta
<section> dentro de esta etiqueta creamos la
etiqueta canvas y le damos un nombre
representativo en este caso “lienzo1”, luego
Figura 4 damos las dimensiones ancho= width=”350”
Fuente:(2012) http://blog.teamtreehouse.com/wp- Alto=heigth=”200” esta medida en pixeles, en
content/uploads/2012/08/html5-canvas.png el estilo= “style” aplicamos un color de fondo, en
este caso gris, es de aclarar que existe una tabla de colores representada mediante
un numero hexadecimal donde cada color está representado por seis dígitos que
inician por el símbolo # (ver tabla de colores), también se pueden consultar en la URL
http://html-color-codes.info/codigos-de-colores-hexadecimales/
Es de aclarar que si el navegador no soporta esta importante etiqueta se aconseja que

el desarrollador del sitio escriba un mensaje “su navegador no soporta el elemento
canvas”
Figura 5, Etiqueta <canvas>

EJERCICIO 1:
El estudioso debe abrir el editor de texto (Sublime Text2, Notepad++, Bloc de notas)
y escribir el siguiente código:
Figura 6, código de etiqueta <canvas>
Fuente: Elaborada por el autor
1. Guardar el documento HTML en una carpeta con el nombre de:

NOMBRE_CANVAS
2. Guardar el archivo con el nombre canvas.html y al ejecutarlo y lo veremos de la
siguiente manera:
Figura 7, Ejercicio de canvas visto en el navegador
Tabla de colores HTML

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#660033 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
Figura 8, Lista de colores Hexadecimal

Fuente: http://www.aulaclic.es/html/b_2_2_1.htm
3. El estudioso debe crear 3 canvas de diferente color, ancho y alto.
Competencias
“El estudioso estará en la capacidad utilizar la etiqueta <canvas>, crear un lienzo
aplicarle color”
2. FORMULARIOS EN HTML5
2.1 LOS FORMULARIOS <form>:
Son fragmentos muy importantes para un sitio web, tanto para el administrador web,
como para el usuario final, permiten enviar información desde una página web a una
base de datos alojada en un servidor generalmente.
Para crear un formulario se utiliza la estructura con las etiquetas:
<form> </form>
Estas etiquetas crean el formulario y deben englobar todos los elementos que hagan
parte de este, para ello la etiqueta <form> tiene dos atributos obligatorios: method
y action.
Figura 9, Etiquetas de la etiqueta <form>
2.1.2 Atributos de la Etiqueta <form>:

 Action=url: Indica la dirección donde será enviado el contenido del formulario.
 method: El método puede ser get o post, indica la forma en que se enviaran
los datos a la url o al servidor.
o get: Se Utiliza cuando la dirección url pasa los valores insertados en el
formulario a otra url.
o post: Envía los datos del formulario a la base de datos.
 name: Le asigna un nombre al formulario, este nombre permite identificar el
formulario desde un script.
 target: Muestra la ventana de destino, en la misma ventana del navegador o en
una nueva ventana.
 accept-charset: Es una lista de caracteres donde el servidor gestiona los datos
del formulario.
 auto-complete: ON y OFF, se puede utilizar para activar y desactivar el
formulario.
Los anteriores atributos se utilizan en el formulario, también se pueden utilizar
los atributos de html (clas, id, dir, style etc).
2.2 ETIQUETA <input>:

Es una de las etiquetas más utilizadas para el desarrollo de formularios y también la
que nos presenta más opciones, permite especificar el registro donde el usuario puede
ingresar datos.
Veamos los tipos de controles que acepta una etiqueta INPUT:
Tipos de Controles.
CONTROL ACCIÓN
Search Cuadro de texto utilizado para hacer búsquedas.
url Determinado para direcciones de página web. Requiere que le
escriban http:// o http:
Tel Se utiliza para escribir números telefónicos.
Email Se utiliza para escribir el correo electrónico.
Password Muestra los caracteres escritos en asteriscos
Number Determinado para escribir números.
Range Muestra una barra para tomar un rango, entre min=”10” y un
max=”12” (los números son un ejemplo)
Checkbox Casilla de verificación utilizada para seleccionar o no seleccionar
una o varias opciones
Radio Botón circular o radial permite seleccionar una sola opción de
button varias posibles.
Submit Botón rectangular
Text Permite insertar únicamente cadenas texto.
Time Trabaja con fechas en general, acompañado de; date, datetime,
month, time,week y datetimelocal.
Figura 10: Tipos de Controles en un formulario
2.2.1 Atributos de la Etiqueta <input>
El atributo principal de la etiqueta <input> es type, ya que nos dice que tipo de
datos debe tomar. A continuación mostramos los atributos que se pueden insertar a la
etiqueta INPUT.
ATRIBUTO ACCIÓN
Type Nos muestra el tipo de control de datos que se va a
trabajar
Src Indica la ruta de los datos
Step Indica la cantidad de valores posibles en un rango
Value Nos muestra el valor que devuelve el control.
requiered (html5) Valor booleano que nos dice si la información es
requerida u obligatoria.
placehoder (html5) Texto de ayuda al usuario que desaparece al pulsar
dentro del campo
Figura 11: Atributos de la etiqueta <input>
EJERCICIO 2:
1. El estudioso debe escribir el siguiente código utilizando un editor de texto
(Sublime Text2, Notepad++, Bloc de notas).
Figura 12: Código editado de un formulario
2. Guardar el archivo con el nombre de: formulario.html en la carpeta

FORMULARIO:
Figura 13: Explorador de Windows carpeta FORMULARIO, archivo de HTML

3. Ejecutamos el archivo con extensión .HTML y aparece el siguiente formulario.

Veamos algunos datos importantes en la ejecución del mismo
 Al llenar el formulario y si este tiene campos faltantes, al hacer clic en el botón de
enviar aparecerá un mensaje que le comunica al usuario “Completa este campo”
acompañado de un signo de admiración.
Figura 14: Ejemplo de Formulario vacío

 En el campo FECHA, aparece un calendario como ventana flotante, llamado

también “datepicker”, para manejar las fechas dadas por el usuario.
Figura 15: Ejemplo del mismo Formulario donde se muestra la vista del calendario
 Al hacer clic en el campo “Correo Electrónico” aparecerá un mensaje flotante
que le comunica al usuario “Incluye un signo @ en la dirección de correo electrónico,
la dirección digitada no incluye este signo” acompañado de un signo de admiración.
Figura 16: Ejemplo del mismo Formulario donde se muestra la ayuda de “correo electrónico”
 Al hacer clic en el botón “Color Favorito” aparecerá una paleta de colores muy
completa para el usuario.
Figura 17: Ejemplo del mismo Formulario donde se muestra una paleta de colores cuando el usuario final hace clic en el color
Competencias
“El estudioso estará en la capacidad profundizar y practicar las etiquetas para
realizar un formulario”
EJERCICIO 3:
El estudioso realizara un formulario utilizando un editor de texto (Sublime Text2,
Notepad++, Bloc de notas), para un paciente que desea sacar citas médicas, para ello,
el formulario debe preguntarle:
 DATOS DEL PACIENTE

o Nombres
o Primer apellido
o Segundo apellido
o Menor de edad SI/NO
o Documento identidad número_________ De: ciudad
o Teléfono casa.
o Teléfono celular.
o Dirección.
 DATOS DE LA CITA
o Ciudad
o Departamento
o Tipo de cita (médico general o especialista)
o Fecha cita (calendario)
o Centro medico (ciudad- barrio)
Competencias
“El estudioso estará en la capacidad profundizar y practicar utilizar etiquetas para
realizar un formulario dado por el docente”
3 HOJAS DE ESTILO EN CASCADA
Figura 18, Hojas de Estilo

Fuente: (2010) http://bextlan.com/slides/css/img/modelo-caja-css.jpg
Las hojas de estilo representan una importante evolución para los desarrolladores web
al darles nuevas y mejores herramientas con el fin de mejorar sus páginas y sitios web,
CSS es el acrónimo de Cascading Style Sheets (hojas de estilo en cascada) permite
al desarrollador web realizar documentos utilizando una serie de sentencias.
Básicamente un estilo CSS es una regla general que le dice al cliente (navegador)
como extender a un elemento concreto a toda la página o mejor aún a todo el sitio
web, por ejemplo; se puede crear una regla CSS para que todas las etiquetas <h2>
tengan una altura de 22 pixeles y una fuente Comic Sans MS y un color Verde, también
se agrega bordes, resalta los contenidos de cada elemento de la página y en sí todo
lo que el usuario final desee.
3.1 DECLARAR ESTILOS CSS DENTRO DEL ELEMENTO.

Las hojas estilo en cascada se deben declarar en el documento HTML. El atributo
que se puede manejar generalmente en todas las etiquetas de HTML es llamado:
style.
Figura 19: Declarar estilos CSS dentro de un elemento.

Nota: Se aconseja que el atributo style se utilice para aplicar estilos a un elemento
y solo debe manejarse en ocasiones puntuales.
3.2 ESTILOS CSS EN HEAD O CABECERA

La siguiente línea de código permite dar color de fuente estándar y un tamaño de
fuente para los párrafos de una página web:
Figura 20: Declarar estilos CSS en la cabecera.

Fuente: Elaborada por el autor
Este estilo nos indica que: “el texto que este en todos los párrafos (Marcado con la
etiqueta<p>) es de color verde y de 20 pixeles de alto”.
Declaración Declaración
p {color : #81F7D8; Font-size:20px; }
Selector Propiedad Valor Propiedad Valor
Figura 21: Explicación de un estilo CSS dentro de un elemento.

 Declaración: Se encuentra entre las llaves de inicio y de cierre de la
declaración y terminan con punto y coma.
o Selector: El selector le indica al cliente (navegador) que etiqueta de la página
se somete al estilo.
o Propiedad: CSS brinda un gran rango de opciones del formato, que son
llamadas propiedades estas pueden ser color o tamaño de fuente.
o Valor: Se le asigna un valor a una propiedad de CSS por ejemplo color en
hexadecimal o tamaño en pixeles.
Veamos el código en el editor de Texto.
Figura 21: Código de estilos CSS en un documento HTML dentro de la Etiqueta <head>
Y el resultado será:
Figura 22: Ejecución del documento .HTML
EJERCICIO 4:
El estudioso debe crear un estilo CSS, donde debe aplicar colores a su gusto en cada
sección, para ello debe tomar como referencia una página web con información real
Competencias
“El estudioso estará en la capacidad profundizar y practicar los estilos CSS Cascading
Style Sheets (hojas de estilo en cascada) en una página web”.
4 HOJA DE ESTILO EXTERNA.
Es quizás la mejor forma para aplicar estilos a los documentos HTML, aunque esta
decisión depende del desarrollador del sitio, pues de esta manera es mucho más fácil
conservar y editar una página o un sitio web. Para ello se debe crear un vínculo al
documento HTML y la hoja de estilos, la página del sitio debe vincularse con la hoja
de estilos usando la etiqueta <link> que se encuentra ubicada en la cabecera del
documento HTML.
Figura 23
Fuente: (2011), http://cdn.onextrapixel.com/wp-content/uploads/2011/04/css.jpg
Por ejemplo.
Figura 24: Etiqueta <link>

Las hojas estilo deben llevar la extensión (.css)
EJERCICIO 5:
El estudioso debe realizar el siguiente ejercicio utilizando un editor de texto (Sublime
Text2, Notepad++, Bloc de notas):
Se debe ingresar la etiqueta <link> dentro de la etiqueta <head> y quedaría de la
siguiente manera:
Figura 25: Página Web con Estilo CSS externa
En el documento HTML, La etiqueta <link> es la que nos enlaza a nuestro documento

externo, el atributo rel en este caso stylesheet, ordena al navegador (cliente) que tipo
de archivo se vincula y el atribulo href, nos muestra la ruta donde está el archivo.
1. Crea una carpeta llamada HojasEstilo

2. Guardamos el ejercicio con el nombre CSSexterna.html y la vista será la
siguiente:
Figura 26: CSS creada y guardada en la carpeta hojasEstilo

3. En un nuevo documento utilizando un editor de texto (Sublime Text2 ,

Notepad++, Bloc de notas) el estudioso debe escribir:
Figura 27: Estilo de la página CSSexterna.html

4. Guardar el archivo en la carpeta HojasEstilo con el nombre estilo.css.
Figura 28: Carpeta HojasEstilo, archivos HTML y CSS

5. Ejecutar el archivo .html:
Figura 29: Ejecución de Hojas de estilo externa.
6. El estudioso debe crear un nuevo estilo, modificando la fuente, tamaño y color
de fondo.
Competencias
“El estudioso estará en la capacidad utilizar la etiqueta <canvas>, crear un lienzo
aplicarle color”
5 REGLAS CSS.
Figura 30: (2010) Hojas de estilo.

Fuente: http://i.imgur.com/mOrvLTt.png
CSS funciona a base de reglas que sirven para uno o más elementos en una página
web, existen varios métodos para elegir cuales selectores HTML serán afectados
por las reglas CSS que podemos definir así:
 Referencias por la palabra clave del elementó.
 Referencias por el atributo id
 Referencias por el atributo class
5.1 REFERENCIAS POR LA PALABRA CLAVE DEL ELEMENTÓ.

Al crear las reglas CSS manejando la palabra clave del elemento esta afectará cada
elementó de la misma clase en la página. Por ejemplo, la siguiente regla modifica los
estilos de todos los elementos <p>.
Figura 31 Regla CSS

Al manejar la palabra clave p al frente de la regla se le está indicando al navegador

que la regla debe ser aplicada a todas las etiquetas <p> que se encuentren en el
documento HTML.
Si el desarrollador desea referenciar una etiqueta específica, la mejor forma es
utilizando los atributos id y class.
REFERENCIAS POR EL ATRIBUTO ID.

El atributo id nos permite dar una identificación o nombre a un elemento en específico.
Por cual significa que el valor de este atributo no puede ser duplicado y este nombre
o identificación debe ser único en todo el documento.
Para referenciar un elemento en específico se usa el atributo id desde el archivo de
CSS la regla debe ser llamada con el símbolo # al frente del valor que se usó para
identificar el elemento:
Figura 32, atributo id

El anterior estilo se guarda en archivo de CSS externo que se llamara misestilos.css

esta línea de código debe estar entre la etiqueta <head>. La descripción del “id” en el
HTML que daría así:
Figura 33: Id en un documento HTML
El resultado en el navegador será:
Figura 34: El ejemplo en el Navegador Google Chrome

Cuando se hace una referencia utilizando el identificador principal en nuestro archivo

CSS, el elemento con ese valor de id será cambiado, pero el resto de elementos <p>,
o cualquier otro elemento del mismo documento, no será cambiado.
5.2 REFERENCIAS POR ATRIBUTO CLASS

El atributo class se puede establecer a cada elemento HTML, en el documento puede
manejar un diseño similar.
Figura 35, Atributo Class

Al atributo class, se debe aplicar la regla CSS con un punto antes del identificador. Un
beneficio de este método es incrustar el atributo class con el valor principal, así
será suficiente para asignarle un estilo a cualquier elemento que se desee:
Por ejemplo:
Figura 36: Aplicar estilos a diferentes elementos a través dl atributo class
Las líneas de código seleccionadas entre las etiquetas <body>, tiene el atributo class
con el valor principal, de esta manera como lo mencionamos anteriormente, la misma
regla se puede aplicar en diferentes elementos dentro del mismo documento, los dos
primeros elementos tienen la misma regla y el último elemento conserva los estilos
por defecto del navegador así se ve al ejecutar nuestro archivo .html:
Figura 37 Vista en Navegador Google Chrome del atributo class

Sin embargo, queda a elección del desarrollador que aunque dos elementos posean
la misma clase, solo se le aplique algunos estilos a solo uno de ellos dentro del sitio
web. En el archivo de CSS, en ese caso debe complementar al inicio del selector,
antes del punto se escribe el nombre del elemento al que desea cambiar.
Por Ejemplo:
Figura 37 Código archivo CSS

Los estilos de la regla se usaran solo en el elemento p de clase principal, pero no
en otros elementos de la misma clase, aunque estos estén en el mismo documento.
Inicialmente trabajamos los selectores con las etiquetas, class e id. En este momento
conoceremos unos más específicos, que nos admiten seleccionar cualquier elemento.
5.3 SELECTOR POR ATRIBUTO:

Una etiqueta “input” puede tomar diferentes formas de acuerdo al atributo “type” el
cual logra tomar diferentes valores como (checkbox, radio, text, etc.) Mediante los
selectores de atributos sabemos especificar un determinado tipo de valor.
Por ejemplo: Si aplicáramos estilos a la etiqueta “input”; todas aquellas etiquetas
input de desiguales tipos serán afectadas.
El selector de atributos pueden detallar qué tipo de etiquetas input serán
reformadas.
La sintaxis seria la siguiente:
Figura 38, Manejo de etiqueta Input

El selector anterior, se logra hacer sin el uso de etiqueta, aunque pueden aparecer
errores si el desarrollador utiliza el atributo de manera muy universal.
o not:
Se puede utilizar en ocasiones donde el desarrollador desee realizar una selección
inversa. Suponga que usted pretende usar un estilo a todos los párrafos, exceptuado
a aquellos que no pertenecen a una clase especifica (en este ejemplo la clase se
llamara “párrafos”).
Figura 39 Manejo de Input

El estilo anterior va a proporcionar un borde rojo a todos los párrafos excepto a los
que estén adentro de la clase “párrafos”.
o nth-child:
El selector “nth-child” permite seleccionar uno o más elementos en un grupo.
Por ejemplo:
Figura 40: Manejo de nth-child
Documento hoja de estilo
Figura 41, Hoja estilo del ejemplo nth-child

Se vera de la siguiente forma en el navegador:
Figura 42: Navegador Google Chrome del ejemplo de nth-child

En HTML5 podemos programar un selector para que este reciba fórmulas
matemáticas o algebraicas y así referirse a un valor como an+b, veamos:
Figura 43: Ejemplo de un documento .html

Figura 44: Hoja estilo de fórmulas matemáticas de nth-child

En la anterior hoja estilo, se coloca fondo al segundo párrafo y el cuarto párrafo. Al

ejecutar el .html quedara así:
Figura 45: Navegador Google Chrome del ejemplo de nth-child fórmulas matemáticas
Existen palabras reservadas que hacen una referencia específica, even y odd,
permiten al desarrollador aplicar un fondo ligeramente diferente a los párrafos impares
y otro fondo a los párrafos pares.
EJERCICIO 6:
EL estudioso debe realizar el siguiente calendario, y debe aplicar colores a su gusto.
Figura 46: Calendario

Fuente: http://2015calendario.blogspot.com/
Competencias
“El estudioso estará en la capacidad utilizar hojas de estilo CSS en una tabla”
Para mirar cómo trabajan estas palabras reservadas tomaremos el ejemplo anterior
pero lo único que vamos a cambiar es la hoja estilo:
Figura 47: Página HTML del ejemplo de nth-child

Figura 48: Hoja estilo de palabra reservados even y odd

Y el resultado será el siguiente:

Figura 49: Navegador Google Chrome de palabra reservadas
Existen diferencias en la forma de escribir este selector:

 :nth-last-child(N): Es igual a “:nth-child:”, con la diferencia que la cuenta
empieza de ultimo al primero.
 :nth-of-type(N): El pseudoclase estructural, selecciona el indeterminado
elemento de su tipo
 last-child: Afecta el último elemento.
 last- nth-of-type(N): Es igual a “:nth-of-type(N):” con diferencia que empieza
desde el ultimo.
 First-child: Solo afecta el primer elemento.
EJERCICIO 7:
El estudioso realizara la siguiente tabla donde debe aplicar lo visto hasta el momento
utilizando diferentes colores a su gusto y una hoja de estilos CSS.
Año Nombre Lugar

1985 Rock in Rio Brasil Río de Janeiro
1991 Rock in Rio II Brasil Río de Janeiro
2001 Rock in Rio III Brasil Río de Janeiro
2004 Rock in Rio Lisboa Portugal Lisboa
2006 Rock in Rio Lisboa II Portugal Lisboa
2008 Rock in Rio Lisboa III Portugal Lisboa
2008 Rock in Rio Madrid España Madrid
2010 Rock in Rio Lisboa IV Portugal Lisboa
2010 Rock in Rio Madrid II España Madrid
2011 Rock in Rio IV Brasil Río de Janeiro
2012 Rock in Rio Lisboa V Portugal Lisboa
2012 Rock in Rio Madrid III España Madrid
2013 Rock in Rio V Brasil Río de Janeiro
2014 Rock in Rio Lisboa VI Portugal Lisboa
2015 Rock in Rio USA Estados Unidos Las Vegas
2015 Rock in Rio VI Brasil Río de Janeiro
Figura 50: Tabla ejercicio No 7
Fuente: http://es.wikipedia.org/wiki/Rock_in_Rio#Festivales
Competencias
“El estudioso estará en la capacidad utilizar hojas de estilo CSS en una tabla
ordenada”
5.4 TEXTO EN CSS3

Los estilos o formatos que tiene el CSS3 son variados, veamos en la siguiente tabla
los atributos, la definición y su respectiva sintaxis.
ATRIBUTO DEFINICIÓN SINTAXIS

font-style: Este atributo puede colocar el texto p{
inclinado hacia atrás. font-style:normal;
font-style:italic;
font-style:oblique;
}
font- weight Este atributo permite aplicar al texto p{
negrita o normal font-weight:normal;
font- weight:bold;
}
text-decoration Se utiliza para quitar el formato p{
predefinido aun vínculo con el text-
valor “none”, aunque se pueden decoration:overline;
dar otros estilos a este atributo text-
como subrayado y tachado. decoration:underline;
text-decoration:line-
through;
text-decoration:none;
}
text-align Permite alinear el texto o algún p{
párrafo a la derecha, al centro, a la text-align: center;
izquierda, también se puede text-align: right;
justificar. text-align: left;
text-align: justifity;
}
Font-family Este atributo maneja un valor de p{
diferentes unidades como son font-size: xx-small;
porcentaje ”%”,pixeles “px”, em, m. font-size: x-small;
se puede definir los valores con font-size: small;
medidas como x-small, small, font-size:medium;
médium, larg, x-large etc. font-size:x-large;
font-size:xx-large;
font-size: smaller;
font-size: larger;
font-size: 12px;
font-size: 2em;
font-size: 85%;
font-size: inherit;
}
Figura 51: Estilos (atributo, definición y sintaxis de CSS3)
EJERCICIO 8:
El estudioso debe digitar el siguiente código utilizando un editor de texto (Sublime
Text2, Notepad++, Bloc de notas).
Figura 52: Ejercicio 8

Después guardamos el archivo con el nombre de textos.html y después abrimos otro

documento para generar la hoja estilo:
Figura 53: Hoja de estilo CSS3 aplicados a los textos
Guardamos el archivo como estilodetexto.css y lo ejecutamos:

Figura 54: Ejemplo visto en Navegador Google Chrome de estilos aplicados a los textos CSS3
El estudioso debe aplicar un color diferente a cada párrafo en la hoja de estilos CSS
Competencias
“El estudioso estará en la capacidad utilizar hojas de estilo CSS combinado fuentes,
colores y alineación,
EJERCICIO 9:
El estudioso debe hacer el siguiente texto utilizando lo visto en la clase, debe tener en
cuenta alineación, negrita, cursiva, tachado, subrayado, fuente, tamaño y color para
cada línea de texto
Figura 55: Ejercicio visto en Navegador Google Chrome con estilos aplicados a los textos CSS3, que el estudioso debe aplicar
Competencias
“El estudioso estará en la capacidad utilizar hojas de estilo CSS combinado
alineación, negrita, cursiva, tachado, subrayado, fuente, tamaño y color para cada
línea de texto”
6. MODELO DE CAJA
Anteriormente los desarrolladores de sitios web utilizaban tablas para organizar sus
páginas o sitios Web, hoy en día el modelo de caja se convierte en una herramienta
de gran importancia en este trabajo. El modelo de caja es un conjunto de propiedades
que definen como se ordenan los elementos de HTML en una página o sitio web
(cajas/rectángulos) y cómo actúan en el ambiente.
Las propiedades son las siguientes:
 Border: Línea que encierra el elemento, por defecto es 0, esto quiere decir sin
borde.
 Background: Esta propiedad muestra un fondo de los elementos u objetos para
que se vean solidos o transparentes (background color), o con una imagen
(background image).
 Padding: Es una margen interna del de la página.
 Width/Height: La propiedad “width” equivale al ancho y el “Heigth” equivale al alto
de la caja.
 Margin: Es un espacio que hay entre la caja y lo que está afuera como por ejemplo
otras cajas.
Figura 56: Caja en HTML5
Fuente: https://librosweb.es/libro/css/capitulo_4.html
6.1 FUNCIÓN DE MODELO DE CAJA

La función de una caja es bastante simple, se usan los selectores para caracterizar la
página HTML, y luego damos las propiedades vistas anteriormente para definir el
modelo de caja. Uno de los elementos más utilizados para realizar cajas es div.
Veamos un ejemplo para entender:

Figura 57: Ejemplo modelo de caja
Observemos que la caja la separa del exterior una margen (margin) de 10px en
todos los lados, y también tiene un borde (border) de 20px de grosor, un color de
fondo (background color) en este caso es el color gris y un borde del contenido, hay
un relleno (padding) de 20px a todos los lados, con la etiqueta div, colocamos un
texto de ejemplo para poder observar todas las propiedades del modelo de caja.
Al ejecutarlo quedara así:

Margin
Border
Brackground
Padding
Width 200px
Figura 58: Ejemplo modelo de caja Navegador Google Chrome
6.2 MARGIN Y PADDING

Teniendo en cuenta el estilo del ejemplo anterior, cuando se utilizan las propiedades
margin y padding se maneja un valor numérico, que define un espacio igual en todos
los lados, 10px a la derecha, izquierda, arriba y abajo, pero también es posible
especificar individualmente cada lado con las siguiente sintaxis:
Figura 59, Documento con “margin”

BORDER
La sintaxis es la siguiente:
Figura 60, Documento con “border”
Existen varios estilos de bordes, veamos las siguientes propiedades:
Figura 61, Documento con “border”

En la figura 61 podemos ver cómo se puede reemplazar “Xlado” por el lado que
deseo utilizar (top, right, bottom, left).
Ejercicio 10:
El estudioso realizara un diseño de cajas, donde creará tres cajas cada una con
diferentes medidas y colores
Figura 62, Ejercicio, diferentes cajas

Competencias
“El estudioso estará en la capacidad utilizar hojas de estilo CSS y cajas para una
página web con sus respectivas propiedades”
6.3 EMPLEAR SOMBRA A UNA CAJA
Los navegadores web son cada vez más compatibles con HTML5 gracias a eso, se
pueden crear efectos visuales, en este tema vamos a aprender cómo crear sombras
en CSS3.
Las sombras se pueden crear en bloques y también en texto, En esta parte del
documento nos concentraremos en las sombras para bloques, sabiendo que un bloque
es creado con la etiqueta <div></div>.
La propiedad box-shadow permite definir una sombra a un objeto de la página para

ello debemos definir propiedades como el color miremos el siguiente ejercicio.
1. box-shadow medida medida medida color

2. border – radius esquinas del recuadro
3. background color - color de fondo
4. width ancho
5. padding relleno.
Observemos el código fuente del siguiente ejercicio:
Figura 63, código Ejercicio sombras
Y cuando se ejecute quedaría así:

Figura 64, ejecución de código Ejercicio sombras
Ejercicio 11:
El estudioso realizara un diseño de cajas con sombras, donde creará dos cajas cada
una con texto.
Figura 63, Ejercicio, diferentes cajas con sombras

Competencias
“El estudioso estará en la capacidad utilizar hojas de estilo CSS y cajas con sombras
para una página web con sus respectivas propiedades”
MATERIAL DE APOYO
- Video Tutorial, Curso Práctico de HTML5 - Cap 01 Estructura Básica de HTML5

2012, Curso Práctico de HTML5. disponible en
https://www.youtube.com/watch?v=2VKHklZl4-I Consultado (22 marzo de
2015)
- Alfaomega- Marcombo, Aprender HTML5, CSS3 Y JavaScript, con 100

ejercicios prácticos Primera edición 2014, (Recuperado el 22 de marzo de 2015)
- Sitio web para descargar navegador de google https://www.google.com/chrome
- Sitio web para descargar navegador de mozilla (2015).

https://www.mozilla.org/es-ES/firefox/new/?scene=2#download-fx
- Sitio web para descargar navegador safari (2015).

https://www.apple.com/es/safari/
- Sitio web para descargar navegador opera (2015). http://www.opera.com/es
- Sitio web para descargar navegador internet Explorer (2015).

http://windows.microsoft.com/es-CO/internet-explorer/download-ie
- Sitio web lista de colores (2004) http://www.aulaclic.es/html/b_2_2_1.htm
- Sitio web tabla de colores (2011) http://html-color-codes.info/codigos-de-

colores-hexadecimales/
- Tabla Informativa festivales rock in rio (2011)

http://es.wikipedia.org/wiki/Rock_in_Rio#Festivales
- Imágenes de calendarios (2015) http://2015calendario.blogspot.com
- sublimetext.com/2, 2013, download, descarga de software editor de texto y de

código fuente disponible en http://www.sublimetext.com/2 (Consultado el 1 de
marzo de 2015).
GLOSARIO.
Link: Es Un enlace o link es texto o imágenes en un sitio web que un usuario puede
pinchar para tener acceso o conectar con otro documento. Los enlaces son como la
tecnología que conecta dos sitios web o dos páginas web. En el navegador se ven
como palabras subrayadas (como Ir al índice de FAQ's al final de ésta
página).(http://www.masadelante.com/faqs/enlace)
Hojas de Estilo en Cascada CSS (Cascading Style Sheets). Son frecuentemente

utilizadas en la realización d plantillas web y son las que principlmente controlan el
color, formato, tipografía y tamaños además de otros numerosos parámetros que
permiten hacer que nuestra página web sea atractiva, (www.gianoliveira.com/hojas-
de-estilo-en-cascada.html)
WHATWG: Son la siglas de Web Hypertext Application Technology Working

Group, una comunidad de personas interesadas en la evolución de la web y de las
tecnologías que están ligadas a esta. (www.desarrolloweb.com/wiki/whatwg).
SCRIPT: En informática un script es un archivo de órdenes o archivo de procesamiento

por lotes, es un programa simple, que se almacena en un archivo de texto plano y cuyo
uso fundamental resulta a la hora de tener que realizar diversas tareas ser la
combinación de componentes, la interacción con el usuario o con el sistema operativo
en cuestión. (www.definicionesabc/general/script.php)
URL: Son las siglas en inglés de uniform resource locator (en español localizador
uniforme de recursos), que sirve para nombrar recursos en Internet. Este nombre
tiene un formato estándar y tiene como propósito asignar una dirección única a cada
uno de los recursos disponibles en Internet, como por ejemplo textos, imágenes,
vídeos, etc.(http://aprenderinternet.about.com/od/ConceptosBasico/a/Que-Es-
Url.htm)
Datepicker: Una de las interfaces de usuario más solicitadas y también de las más
útiles, es un calendario para seleccionar una fecha. Este calendario permite que las
personas puedan escoger una fecha a golpe de ratón y de manera visual, sin tener
que escribir la fecha.( http://www.desarrolloweb.com/articulos/componente-datepicker-
jquery-ui.html)
Pseudoclase: Una pseudoclase es un estado o uso predefinido de un elemento al que

se le puede aplicar un estilo independientemente de su estado por defecto.(
http://www.genbetadev.com/desarrollo-web/introduccion-a-las-pseudo-clases-de-
css3)
Notepad++: Notepad++ es un programa para editar código fuente de cualquier

lenguaje de programación. Como tiene soporte para una gran cantidad de lenguajes,
interesará no sólo a los desarrolladores de webs, sino en general a toda la comunidad
de programadores.
Sublime Text 2: Es un editor de código al estilo TextMate, Kate o Redcar, su interfaz
es limpia e intuitiva y soporta el uso de Snippets, Plugins y sistemas de construcción
de código (Build Systems).
En un principio fue creado por Jon Skinner como una extensión rica en features de vim
pero poco a poco fue adoptando identidad propia, debido a ello, Sublime Text 2 aún
conserva un modo de edición tipo vi llamado “Vintage
mode“.(http://www.genbetadev.com/herramientas/sublime-text-2-el-editor-de-texto-
definitivo)
Snippets: En SEO denominamos snippet a la descripción resumida de un sitio, que

extraen los motores de búsqueda web cuando muestran -a modo de resumen- los
resultados de búsqueda para una consulta junto a la URL.
(http://www.jbmoreno.es/que-son-snippets/=)
Plugins: Es una aplicación o herramienta que puede ser agregada al software del blog
para mejorar el rendimiento del blog o proveer características adicionales.(
http://perlarodriguez.com/que-son-los-plugins-para-que-sirven-y-cuales-debes-tener-
para-una-buena-optimizacion-de-tu-blog/)
Build Systems: Significa construir sistemas para ejecutar programas externos, para
procesar los archivos de un proyecto y la impresión de salida.(
http://sublimetext.info/docs/en/reference/build_systems.html)
WEBGRAFÍA.
- Desarrollo web, Miguel Álvarez. (Noviembre de 2009) Introducción a Canvas del

HTML 5 Recuperado el 20 de abril de 2015 en
www.desarrolloweb.com/articulos/introduccion-canvas-html5.html
- AulaClic S.L, (Marzo, 2012). Curso de HTML, Recuperado el 30 de abril de 2015, en

http://www.aulaclic.es/html/t_1_1.htm
- w3schools (1999), HTML5 Tutorial, Recuperado el 12 de abril de 2015, en

http://www.w3schools.com/html/default.asp
Scriptbc, Homero Raul Vargas Cruz. (2014) Recuperado el 30 de marzo de 2015, de

http://scriptbc.com/referencia-con-id-y-class
- Genbeta, desarrollo y software (2011) Recuperado el 31 de marzo de 2015 de.

http://www.genbetadev.com/desarrollo-web/introduccion-a-las-pseudo-clases-de-css3
Blog Ignacio Oyola (Mayo de 2014) Recuperado el 31 de marzo de 2015 de

http://untitled.es/pseudo-clases-estructurales-css3-formula-nth-child/.
- Scriptbc, Homero Raul Vargas Cruz. Recuperado el 30 de marzo de 2015 de

http://scriptbc.com/nuevos-selectores-en-css3/
BIBLIOGRAFIA
MediaActive. (2014). Aprender HTML5, CSS3 Y Javascript, con 100 ejercicios

prácticos Primera edición 2014. México: Alfaomega- Marcombo.
Gauchat, Juan Diego (2012). El gran libro de HTML5, CSS3 y Javascript, primera
edición 2012, España: Alfaomega- Marcombo.
Andrés Pastorini. (2012). HTML5 & CSS3, España, Salmandra.
Aarón Rojo, Andres Serbat (2013). La Guía de HTML5 CSS y JavaScript,2 Edicion ,
España Kindle Edition

Módulo 2 HTML5

Cargado por

Información del documento

Título original

Derechos de autor

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Módulo 2 HTML5

Título original:

Cargado por

Copyright:

Curso: HTML 5

El curso HTML5 (HyperText Markup Language) forma parte de las asignaturas de IV

Figura 1 HTML5 y CSS3

En la primera parte del módulo hablaremos sobre la etiqueta <canvas> y el manejo

 Desarrollar habilidades para crear formularios dinámicos en un sitio web

2.2 ETIQUETA <input>: ....................................................................................... 9

3 HOJAS DE ESTILO EN CASCADA .................................................................... 14

Figura 3, Ideograma CSS

Es recomendable actualizar los navegadores para que la etiqueta <canvas> funcione

Esta etiqueta se debe insertar dentro de la

Es de aclarar que si el navegador no soporta esta importante etiqueta se aconseja que

Figura 5, Etiqueta <canvas>

1. Guardar el documento HTML en una carpeta con el nombre de:

Tabla de colores HTML

Figura 8, Lista de colores Hexadecimal

3. El estudioso debe crear 3 canvas de diferente color, ancho y alto.

2.1.2 Atributos de la Etiqueta <form>:

2.2 ETIQUETA <input>:

2. Guardar el archivo con el nombre de: formulario.html en la carpeta

Figura 13: Explorador de Windows carpeta FORMULARIO, archivo de HTML

3. Ejecutamos el archivo con extensión .HTML y aparece el siguiente formulario.

Figura 14: Ejemplo de Formulario vacío

 En el campo FECHA, aparece un calendario como ventana flotante, llamado

 DATOS DEL PACIENTE

3 HOJAS DE ESTILO EN CASCADA

Figura 18, Hojas de Estilo

3.1 DECLARAR ESTILOS CSS DENTRO DEL ELEMENTO.

Figura 19: Declarar estilos CSS dentro de un elemento.

3.2 ESTILOS CSS EN HEAD O CABECERA

Figura 20: Declarar estilos CSS en la cabecera.

p {color : #81F7D8; Font-size:20px; }

Selector Propiedad Valor Propiedad Valor

Figura 21: Explicación de un estilo CSS dentro de un elemento.

Veamos el código en el editor de Texto.

4 HOJA DE ESTILO EXTERNA.

Figura 24: Etiqueta <link>

Las hojas estilo deben llevar la extensión (.css)

En el documento HTML, La etiqueta <link> es la que nos enlaza a nuestro documento

1. Crea una carpeta llamada HojasEstilo

Figura 26: CSS creada y guardada en la carpeta hojasEstilo

3. En un nuevo documento utilizando un editor de texto (Sublime Text2 ,

Figura 27: Estilo de la página CSSexterna.html

4. Guardar el archivo en la carpeta HojasEstilo con el nombre estilo.css.

Figura 28: Carpeta HojasEstilo, archivos HTML y CSS

Figura 30: (2010) Hojas de estilo.

5.1 REFERENCIAS POR LA PALABRA CLAVE DEL ELEMENTÓ.

Figura 31 Regla CSS

Al manejar la palabra clave p al frente de la regla se le está indicando al navegador

REFERENCIAS POR EL ATRIBUTO ID.

Figura 32, atributo id

El anterior estilo se guarda en archivo de CSS externo que se llamara misestilos.css

El resultado en el navegador será:

Figura 34: El ejemplo en el Navegador Google Chrome

Cuando se hace una referencia utilizando el identificador principal en nuestro archivo

5.2 REFERENCIAS POR ATRIBUTO CLASS

Figura 35, Atributo Class

Figura 37 Vista en Navegador Google Chrome del atributo class

Figura 37 Código archivo CSS

5.3 SELECTOR POR ATRIBUTO:

Figura 38, Manejo de etiqueta Input

Figura 39 Manejo de Input

Figura 41, Hoja estilo del ejemplo nth-child

Se vera de la siguiente forma en el navegador:

Figura 42: Navegador Google Chrome del ejemplo de nth-child

Figura 43: Ejemplo de un documento .html