Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Módulo 2 HTML5
Módulo 2 HTML5
• 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
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.
ESTRUCTURA TEMATICA
TABLA DE CONTENIDO
1. CANVAS ............................................................................................................... 6
2. FORMULARIOS EN HTML5 ................................................................................. 9
2.1 LOS FORMULARIOS <form> ........................................................................ 9
2.1.2 Atributos de la Etiqueta <form> ................................................................. 10
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
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,” (desarrolloweb.com, 2015)
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
Competencias
“El estudioso estará en capacidad de utilizar la etiqueta <canvas>, crear un lienzo y
aplicarle color”
2. FORMULARIOS EN HTML5
<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>
Fuente: Elaborada por el Autor
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
Fuente: Elaborada por el Autor
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>
Fuente: Elaborada por el Autor
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
Fuente: Elaborada por el Autor
Figura 15: Ejemplo del mismo Formulario donde se muestra la vista del calendario
Fuente: Elaborada por el Autor
• 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”
Fuente: Elaborada por el Autor
• 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
Fuente: Elaborada por el Autor
Competencias
“El estudioso estará en capacidad de profundizar y practicar las etiquetas para
realizar un formulario”
EJERCICIO 3:
Competencias
“El estudioso estará en capacidad de profundizar y practicar utilizar etiquetas para
realizar un formulario dado por el docente”
Básicamente un estilo CSS es una regla general que le dice al cliente (navegador)
cómo 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.
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.
Nota: Se aconseja que el atributo style se utilice para aplicar estilos a un elemento y
solo debe manejarse en ocasiones puntuales.
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
Figura 21: Código de estilos CSS en un documento HTML dentro de la Etiqueta <head>
Fuente: Elaborada por el Autor
Y el resultado será:
Figura 22: Ejecución del documento .HTML
Fuente: Elaborada por el Autor
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 capacidad de profundizar y practicar los estilos CSS Cascading
Style Sheets (hojas de estilo en cascada) en una página web”.
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.
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
Fuente: Elaborada por el Autor
Competencias
“El estudioso estará en capacidad de utilizar la etiqueta <canvas>, crear un lienzo
aplicarle color”
5 REGLAS CSS.
Por ejemplo:
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:
Sin embargo, queda a elección del desarrollador que aunque dos elementos posean
la misma clase, se le aplique algunos estilos a solo uno de ellos dentro del sitio web.
En el archivo de CSS 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
Fuente: Elaborada por el Autor
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.
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.
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:
o 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 45: Navegador Google Chrome del ejemplo de nth-child fórmulas matemáticas
Fuente: Elaborada por el Autor
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 capacidad de 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:
EJERCICIO 7:
El estudioso realizará la siguiente tabla donde debe aplicar lo visto hasta el momento
utilizando diferentes colores a su gusto y una hoja de estilos CSS.
Los estilos o formatos que tiene el CSS3 son variados, veamos en la siguiente tabla
los atributos, la definición y su respectiva sintaxis.
EJERCICIO 8:
Figura 54: Ejemplo visto en Navegador Google Chrome de estilos aplicados a los textos CSS3
Fuente: Elaborada por el Autor
El estudioso debe aplicar un color diferente a cada párrafo en la hoja de estilos CSS
Competencias
“El estudioso estará en capacidad de 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
Fuente: Elaborada por el Autor
Competencias
“El estudioso estará en capacidad de 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 cómo se ordenan los elementos de HTML en una página o sitio web
(cajas/rectángulos) y cómo actúan en el ambiente.
• 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.
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.
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.
Border
Brackground
Padding
Width 200px
Figura 58: Ejemplo modelo de caja Navegador Google Chrome
Fuente: Elaborada por el Autor
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 la siguiente sintaxis:
BORDER
La sintaxis es la siguiente:
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 realizará un diseño de cajas, donde creará tres cajas cada una con
diferentes medidas y colores
Competencias
“El estudioso estará en capacidad de utilizar hojas de estilo CSS y cajas para una
página web con sus respectivas propiedades”
Los navegadores web son cada vez más compatibles con HTML5; gracias a esto 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>.
Ejercicio 11:
El estudioso realizara un diseño de cajas con sombras, donde creará dos cajas cada
una con texto.
Competencias
“El estudioso estará en capacidad de utilizar hojas de estilo CSS y cajas con sombras
para una página web con sus respectivas propiedades”
MATERIAL DE APOYO
Link: 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)
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).
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)
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.
Gauchat, Juan Diego (2012). El gran libro de HTML5, CSS3 y Javascript, primera
edición 2012, España: Alfaomega- Marcombo.
Aarón Rojo, Andres Serbat (2013). La Guía de HTML5 CSS y JavaScript,2 Edicion ,
España Kindle Edition