Scribd
Cargar
124 vistas

Modulo 1 HTML5

Este documento presenta un curso de 3 créditos académicos sobre HTML5. Explica que HTML5 incluye nuevas características y etiquetas que permiten crear sitios web más interactivos y dinámicos. Describe las competencias que los estudiantes desarrollarán como maquetar páginas web, integrar multimedia e implementar buenas prácticas de diseño web. Finalmente, detalla la estructura temática del curso la cual cubrirá conceptos básicos de HTML5 así como etiquetas y elementos importantes para el desarrollo

Cargado por

juan pablo eraso
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
124 vistas

Modulo 1 HTML5

Este documento presenta un curso de 3 créditos académicos sobre HTML5. Explica que HTML5 incluye nuevas características y etiquetas que permiten crear sitios web más interactivos y dinámicos. Describe las competencias que los estudiantes desarrollarán como maquetar páginas web, integrar multimedia e implementar buenas prácticas de diseño web. Finalmente, detalla la estructura temática del curso la cual cubrirá conceptos básicos de HTML5 así como etiquetas y elementos importantes para el desarrollo

Cargado por

juan pablo eraso
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 57

Curso: HTML 5

Créditos
Académicos: 3
Módulo 1 HTML Básico
Autor Duver Rene Acosta Orjuela

INTRODUCCIÓN

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, con elcual los
estudiante trabajaran de una forma detallada los pasos para maquetar y desarrollar
una página web desde su fase inicial y llegar a tener una perspectiva muy práctica.

HTML5 está compuesto por nuevas particularidades del lenguaje, incluyen nuevas
características y etiquetas que ayudan a los desarrolladores de aplicaciones web a
crear sitios más interactivos y dinámicos,

Miles de personas se conectan cada minuto a internet desde tablets, smartphones,


netbooks, nettop, all in one o computadores de escritorio, con el objetivo de aprender,
trabajar, jugar o simplemente realizar actividades de ocio; estas personas desean
interactuar con sitios web que tengan buen diseño, excelente navegabilidad,
usabilidad y en general la interacción con texto, imágenes, sonidos y vídeos.

YouTube es una de las grandes empresas que a inicio de año comenzó a utilizar
HTML5 en su reproductor de video para dejar a Adobe flash, esto por las constantes
quejas de usuarios que notaban demora en la carga de los videos y pérdida de calidad,
otros grandes como Microsoft, Apple, netflix y vimeo también lo están utilizando.

Figura 1, HTML5
Fuente: wonderfox (2009) , http://www.abiawebdesign.com/quality-techniques-html5-development.php

Veamos algunas razones que hacen que hoy HTML5 sea más fuerte que flash:

1
 HTML5 puede reproducir contenido multimedia sin la necesidad de otra aplicación,
flash necesita instalar Adobe flash player, para que pueda cargar los plugin;
 HTML5 funciona mejor en sistemas operativos como IOS, Linux y Android, mientras
que no todos los sistemas operativos reciben flash.
 HTML5 funciona en cualquier computador, con un navegador actualizado al igual
que en dispositivos móviles como smartphone, tablet, pablet, Smart TV, flash no se
puede instalar en muchos de estos dispositivos.
 HTML5 es gratis, es decir su código es abierto, flash necesita el software específico
de desarrollo de la empresa de software Adobe y su licencia,
 En conclusión flash ha sido replegado por HTML5 y aunque está trabajando para
que en un futuro cercano sea multiplataforma, pueda exportar archivos en HTML y
no en SWF (Adobe Flash), hay que destacar que su excelente trabajo se orienta al
desarrollo de juegos.

2
COMPETENCIAS

 Adquirir conocimientos básicos requeridos de la estructura básica para


desarrollar sitios web.
 Desarrollar habilidades para la creación de una página web, utilizando el
lenguaje de marcas HTML5.
 Integrar en un sitio web herramientas multimediales como imagen, texto, sonido
y video.
 Desarrollar la capacidad de organizar y planificar un proyecto informático
orientado al desarrollo Web.
 Desarrollar una creatividad y motivación constante frente al fascinante mundo
del desarrollo Web.

3
ESTRUCTURA TEMÁTICA

Contenido
1. INTRODUCCIÓN A HTML (HYPER TEXT MARKUP LANGUAGE) .............. 8
2. CARACTERÍSTICAS DEL LENGUAJE DE MARCADO................................. 9
3. ESTRUCTURA BÁSICA DE HTML ............................................................... 9
3.1 <html></html>: ............................................................................................. 10
3.2 <head></head>: ........................................................................................... 10
3.3 <body></body>: ........................................................................................... 10
4. ETIQUETAS GENERALES .......................................................................... 10
4.1 <!DOCTYPE> ............................................................................................... 10
4.2 <html lang=”es”> </html> ........................................................................... 10
4.3 <head> Titulo del sitio web</head>.............................................................. 11
4.4 <body> Cuerpo de nuestra página</body> .................................................. 11
4.5 <meta charset="utf-8"/>................................................................................ 12
4.6 Meta: ............................................................................................................ 12
4.7 <link>............................................................................................................ 13
5. ESTRUCTURA BASICA DE UNA PAGINA WEB HTML5 ............................ 14
5.1 <header>Cabecera del sitio web</header> ................................................. 15
5.2 <nav>Navegación</nav> ............................................................................. 15
5.3 <article>Articulo </article> ............................................................................ 16
5.4 <section>Sección</section> ........................................................................ 17
5.5 <aside> Barra Aparte</aside> ..................................................................... 19
5.6 <footer> Pie de página</footer> ................................................................... 19
6. ETIQUETAS UTILIZADAS DENTRO DEL CUERPO. .................................. 21
6.1 <hgroup></hgroup>:..................................................................................... 21
6.2 Encabezados<h1><h2><h3><h4><h5><h6> ............................................... 22
6.3 Párrafos: <p> párrafo escrito</p> ................................................................ 23
6.4 Saltos de línea<br> ...................................................................................... 23
7. FORMATO DE TEXTO: ............................................................................... 23
7.1 Negrita<b> y </b> (bold): ............................................................................. 23
7.2 Cursiva <i> e </i> (ITALICA) ........................................................................ 23
7.3 Subrayado <u> y </u> .................................................................................. 24
7.4 Color, Tamaño y Tipo de Fuente: ................................................................. 24
7.5 Línea Horizontal <hr> ................................................................................... 24
4
7.6 <em></em>: ................................................................................................. 25
7.7 <strong> y </strong>: ................................................................................... 25
7.8 <small> y </small> ....................................................................................... 25
7.9 <cite></cite>: ................................................................................................ 25
7.10 <s></s>: ..................................................................................................... 26
7.11 <q></q>: ..................................................................................................... 26
7.12 <dfn> y </dfn>: ........................................................................................... 26
7.13<sup></sup> ............................................................................................... 26
7.14 <sub></sub> .............................................................................................. 27
7.15 <span></span>: ......................................................................................... 27
7.16 <div> </div>: ............................................................................................... 27
7.17 <center>Centrar </center> ......................................................................... 28
8. LISTAS ......................................................................................................... 28
8.1 Listas no ordenadas: <ul> y </ul>: ............................................................... 28
8.2 Listas Ordenadas: <ol> y </ol>: ................................................................... 29
8.3 Lista en Orden Inverso: reversed: ................................................................ 29
8.4 Listas de Definiciones: <dl></dl>, <dt></dt>y <dd></dd>: ........................... 30
9. TABLAS <table></table>. ............................................................................. 33
9.1 Las Filas: <tr>y</tr>: .................................................................................... 33
9.2 Las Celdas <td> y <td>: ............................................................................... 33
9.3 Las Celdas<th> y </th>: ............................................................................... 34
10. ENLACES .................................................................................................... 35
10.1 Enlaces Internos:........................................................................................ 35
10.2 Enlaces Locales: ........................................................................................ 35
10.3 Enlaces Externos: ...................................................................................... 36
11. ARCHIVOS DE IMAGEN, AUDIO Y VIDEO. ................................................ 36
11.1 Archivos de Imagen. ................................................................................... 36
11.1.1 Elementos de la Imagen ......................................................................... 38
11.2 Archivo de Audio. ....................................................................................... 41
11.3 Archivo de Video ........................................................................................ 45
MATERIAL DE APOYO. ........................................................................................ 51
GLOSARIO ............................................................................................................ 53
WEBGRAFIA. ........................................................................................................ 55
BIBLIOGRAFIA ...................................................................................................... 57
5
6
IDEOGRAMA

HTML5

Introducción

Estructura Básica Etiquetas Estructura Basica


Caracteristicas
HTML Generales HTML5

<html> <DOCTYPE> <html lang="es"> <head> <body> <meta charset="utf-8"> <meta> <link> <header> <nav> <section> <aside> <footer>

<head> <hgroup> Encabezado <p> listas Tablas Enlaces A. Audiovisual name stylesheet <article>

<body> <b><i><u> <ul><ol><dl> <tr><td><th> Internos Imagen content

Locales Audio

Externos Video

Figura1 IDEOGRAMA
Fuente: Elaborada por el autor

7
1. INTRODUCCIÓN A HTML (HYPER TEXT MARKUP LANGUAGE)

Fígura 2 WHAT IS HTML 5


FUENTE: http://www.glogster.com/mjlamarca/html5/g-6mn55t9gl47ke36eo30sua0

HTML es el sistema de etiquetas con el que se desarrollan muchas páginas y sitios


web en el mundo; agrega un marcado semántico que puede describir el contenido del
sitio haciendo más fácil el diseño, este sistema de etiquetas pueden marcar el inicio y
el fin de cada elemento del documento y dar una diagramación efectiva a nuestros
sitios web.

Un sitio web contiene gran variedad de hipertextos los cuales podemos definir como
en la obra Literary Machines, Ted Nelson (1965) "Con 'hipertexto' me refiero a una
escritura no secuencial, a un texto que bifurca, permite que el lector elija y se lea mejor
en una pantalla interactiva”, los hipervínculos son una serie de enlaces en un
documento electrónico que funcionan como anclas de origen y destino los cuales se
conectan y ayudan al usuario ampliar la información.

Para comenzar a trabajar con HTML necesitamos:

 Un editor de texto el cual nos permite desarrollar nuestro código HTML y


posteriormente guardar el archivo con la extensión .html, ejemplo misitio.html. El
ideal de toda página web es que el archivo principal o archivos principales lleven el
nombre de index.html, esto para mantener un estándar y un orden ya que no siempre
las empresas cuentan con el mismo diseñador o desarrollador, en el momento que otra
persona administre el sitio, esté sea de fácil acceso y edición, con el único objetivo
de se pueda visualizar en diferentes navegadores web.
 En segundo lugar necesitamos un browser o navegador web (Internet Explorer,
Mozilla Firefox, Google Chrome, entre otros,) el cual nos permite traducir e interpretar
el código HTML desarrollado en un editor de texto como: sublime text, notepad++,
Dreamweaver, entre otros.

8
2. CARACTERÍSTICAS DEL LENGUAJE DE MARCADO

HTML5 es un lenguaje de marcado de hipertexto fácil de aprender que nos permite


crear páginas web.

Figura 3, HTML5
Fuente: wonderfox, (2005),http://www.videoconverterfactory.com/tips/html5.html

Podemos decir que la mayoría de los navegadores soportan las características de


HTML5 y su tecnología donde HTML, CSS y JavaScript se convierten en una poderosa
herramienta de diseño y desarrollo web.
HTML5 es un lenguaje que basa su sintaxis en un elemento llamado etiqueta, la cual
tiene por lo general dos partes:

Una apertura de forma general <etiqueta>

Un cierre de tipo </etiqueta>

Todo lo incluido entre la apertura y el cierre de esa etiqueta tendrá modificaciones


dependiendo de lo que quiere el programador.
Por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita, si en nuestro documento
HTML escribimos una frase con el siguiente código:

<b>El Texto Universidad Manuela Beltrán, está en negrita</b>

El resultado Será:

El Texto Universidad Manuela Beltrán, está en negrita

3. ESTRUCTURA BÁSICA DE HTML


Una página web está compuesta de dos partes muy importantes: el encabezado y el
cuerpo de la página. Pero existen tres etiquetas fundamentales, que deben estar
incluidas en el archivo HTML de manera obligatoria y aunque las etiquetas pueden
escribirse en mayúsculas o minúsculas se recomienda como regla general que se haga
en minúscula, las etiquetas son:

9
3.1 <html></html>:
Indica al navegador que el documento que está recibiendo es un documento HTML.
Esta etiqueta se abre obligatoriamente al inicio del archivo y se cierra al final del mismo.
3.2 <head></head>:
Esta etiqueta nos delimita el encabezado de la página web, es importante saber que
lo que el usuario escriba aquí no aparece en nuestra página web como tal. Están
relacionadas también las etiquetas meta que estudiaremos a fondo más adelante,
proveemos información general del documento e incorporamos archivos externos con
estilos.
3.3 <body></body>:
Cuerpo de la página, es aquí donde se despliega el contenido general de nuestro sitio
web, información importante con texto, imágenes, sonido y videos, la etiqueta body
contiene todo el contenido que es visible al usuario final y se inserta luego de cerrar el
encabezado extendiéndose hasta el final de la página.

4. ETIQUETAS GENERALES:
4.1 <!DOCTYPE>
Indica que vamos a trabajar con el estándar HTML5 y debe usarse siempre con esta
sintaxis, facilitara al explorador la tarea de identificar el tipo de documento, esta línea
debe ser la primera de nuestro archivo:

<!DOCTYPE html>

4.2 <html lang=”es”> </html>


Es una etiqueta opcional teniendo en cuenta que HTML5 es un nuevo estándar que
busca simplificar el código y hacerlo más genérico y global, permite declarar el idioma
de una página web, el sistema de codificación de caracteres que se utiliza en ella
resulta de gran importancia para facilitar que la página sea indexada correctamente
por los buscadores y que sea leída correctamente por los navegadores, <html
lang=”es”> lang = Language=”español”, los códigos para identificar el idioma
siempre consta de dos letras y están definidos por la ISO 639-1, también podemos
mencionar el <metacharset=UTF-8> el cual le dice al navegador que la página que
está leyendo tiene caracteres especiales.

10
Figura 4 Etiqueta <html lang=”es”>
Fuente: Elaborada por el autor

4.3 <head> Titulo del sitio web</head>


Esta etiqueta debe ir al iniciar nuestro documento, tiene una etiqueta de apertura y una
de cierre, permite definir el título de nuestra página web, definimos el tipo de
codificación del documento.

Figura 5: código escrito en el bloc de notas Figura 6: Archivo HTML visto desde Opera
Fuente: Elaboradas por el autor

4.4 <body> Cuerpo de nuestra página</body>


Cuerpo de la página donde se despliega el contenido global, texto, imágenes, sonido
etc. es importante resaltar que lo que está aquí es lo que ve el usuario final. Esta
etiqueta se abre luego de cerrar el encabezado con </head> y se extiende hasta el
final de la página, cerrándose antes de </HTML>.

11
Figura 7 Etiqueta Body
Fuente: Elaborada por el autor

4.5 <meta charset="utf-8"/>


Declaración de la codificación de caracteres utilizada, esta debe incluirse siempre
después de la etiqueta <head>, la declaración meta indica al navegador el tipo de
codificación utilizada en la página y asegura la correcta lectura de caracteres propios
del castellano como la letra ñ.

Figura 8: Ejemplo de <Meta>


Fuente: Elaborada por el autor

4.6 Meta:
Se utiliza para dar información sobre la página web, dicha información será utilizada
por los buscadores, es importante destacar el uso de atributos como name y content,
o Name. Este atributo muestra el tipo de información.
o Content. Atributo que indica el valor de la información.

Para mostrar el valor de la información podemos utilizar:


o Author: Indica el nombre del creador o desarrollador de la página.

12
o Description: Presenta una breve descripción del contenido de nuestra página, este
es muy utilizado por directorios de páginas y buscadores web.
o Generator. Indica con que software fue creada la página web.
o Keywods: Son las palabras más relevantes de nuestro documento.

La etiqueta name no necesita cierre, aquí solo se especifica la información y su valor


Por ejemplo:

Figura 9: Ejemplo de etiqueta Meta con atributos.


Fuente: Elaborada por el autor

4.7 <link>
Esta etiqueta va dentro de la cabecera del documento, es utilizada para incorporar
estilos, códigos JavaScript, imágenes o iconos desde otros archivos y estilos CSS.

13
Figura 10: Ejemplo de Link
Fuente: Elaborada por el autor

5. ESTRUCTURA BASICA DE UNA PAGINA WEB HTML5

Figura 11 Estructura básica de una página web HTML5


Fuente: Elaborada por el autor

14
5.1 <header>Cabecera del sitio web</header>
Identifica la cabecera del sitio web en si (no del documento como <head>), puede
tener diferentes usos como identificar el título del sitio web, identificar los subtítulos,
logotipo, el contenido introductorio, describe la identidad de la página por ejemplo logo,
nombre, redes sociales y también el buscador.

Figura 12: Etiqueta <header>


Fuente: Elaborada por el autor

5.2 <nav>Navegación</nav>
Esta etiqueta se debe ubicar dentro de la etiqueta <body> después de la etiqueta
<header> en esta zona de nuestra página web estará la zona de navegación,
encontramos aquí menús desplegables e hipervínculos a otras partes de nuestro sitio
web, es de aclarar que <nav> no hace parte de la cabecera sino que es una nueva
sección.

15
Figura 13 Etiqueta <nav>
Fuente: Elaborada por el autor

5.3 <article>Articulo </article>


Permite separar elementos independientes que pueden componer una sección,
resaltar una palabra o un texto.

16
Figura 14: Etiqueta <article>
Fuente: Elaborada por el autor

Y el resultado será el siguiente:

Figura 15: Etiqueta <article> vista desde el navegador


Fuente: Elaborada por el autor

5.4 <section>Sección</section>
Esta etiqueta me permite insertar cualquier recurso en el documento, es decir permite
agrupar contenidos de un tema en particular, en HTML5 se aconseja utilizar dentro de
esta etiqueta las etiquetas <article> y <asiade>, es lógico que todo el contenido de la
página debe tener una relación entre sí.
Por ejemplo:

17
Figura 16: Etiqueta <section>
Fuente: Elaborada por el autor

Y el resultado será el siguiente.

Figura 17: Etiqueta <section>vista desde el Navegador


Fuente: Elaborada por el autor

Al ejecutar nuestro código del ejemplo, podemos ver que la etiqueta no provoca ningún
cambio pero es necesario organizar de esta manera la estructura interna del
documento.

18
5.5 <aside> Barra Aparte</aside>
Esta etiqueta establece una barra lateral utilizada en muchas ocasiones para mostrar
publicidad o información complementaria, puede estar al lado derecho o izquierdo
según corresponda.

5.6 <footer> Pie de página</footer>


Esta etiqueta se ubica al final de la página web y se aconseja que este allí la
información institucional o personal del sitio, es decir aquí está el pie de página de
nuestro sitio web.

Por ejemplo:

Figura 18: Etiqueta <footer>


Fuente: Elaborada por el autor

19
Ejercicio 1
1. El estudioso debe ingresar a la dirección web: http://geeksroom.com/2013/07/los-
50-mejores-sitios-web-del- 2013-segun-time-magazine/77369/ o la dirección:
http://www.mejoresdelmundo.com/mejores-paginas-web-del-mundo-
queprobablemente-no-conozcas
Allí encontrará las 50 mejores páginas del mundo revíselas y de su concepto en un
escrito de 200 palabras.
2. Ingrese a la dirección http://colombiadigital.net/actualidad/noticias/item/4077-cinco-
p%C3%A1ginas-recomendadas-para-fuentes-en-internet.html
Encontrará páginas web, de su concepto en un escrito de 200 palabras.
3. Ingrese a la dirección http://webstudio316.com/top-10-peores-sitios-web/
Encontrará las peores páginas web del mundo y de su concepto en un escrito de 200
palabras.

Competencias
“El estudioso estará en la capacidad de buscar direcciones de internet, realizar un
análisis y hacer un escrito sobre las mejores y peores páginas web del mundo”

Ejercicio 2
El estudioso realizara el siguiente ejercicio paso a paso con el fin de practicar y
profundizar lo realizado hasta el momento.

1. El siguiente texto se copiara en el bloc de notas de Windows:

Figura 19: Ejercicio 1


Fuente: Elaborada por el autor

2. Luego de copiarlo se guardara con el nombre de Ejerciciouno.html dentro de una


carpeta que se creara en el escritorio con el nombre de EjerciciosBasicosHTML,

20
3. Ejecutar el archivo Ejerciciouno.html (el resultado será:)

Figura 20: Ejecución del en el navegador del ejercicio uno


Fuente: Elaborada por el autor
Competencias
“El estudioso estará en la capacidad profundizar y practicar las etiquetas básicas de
una página web”

6. ETIQUETAS UTILIZADAS DENTRO DEL CUERPO.


6.1 <hgroup></hgroup>:
La etiqueta <hgroup>es Utilizada para agrupar un conjunto de elementos h1–h6, por
ejemplo, cuando tenemos un título y un subtítulo.

Figura 21: Etiqueta <hgroup>


Fuente: Elaborada por el autor

21
Y el resultado será el siguiente:

Figura 22: Etiqueta <hgroup> vista desde el navegador


Fuente: Elaborada por el autor

6.2 Encabezados<h1><h2><h3><h4><h5><h6>
Los encabezados juegan un papel muy importante en una página web, las etiquetas
<h> heading en ingles significa encabezado y el numero desde el 1 hasta el 6 tiene
que ver con el tamaño de la fuente.

Figura 23: Etiqueta <h1>


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

22
Figura 24: Etiqueta <h1> vista desde el navegador
Fuente: Elaborada por el autor

6.3 Párrafos: <p> párrafo escrito</p>


Esta etiqueta permite definir párrafos en HTML. Cada vez que trabajemos con esta
herramienta le decimos al navegador que interprete el texto como único en cada
etiqueta. Por defecto un párrafo estará alineado a la izquierda, pero mediante el
atributo: ALIGN y mediante los siguientes valores podemos cambiar la alineación del
párrafo:
 LEFT. Alineación a la izquierda por defecto
 CENTER. Texto centrado
 RIGHT. Alineación a la derecha

6.4 Saltos de línea<br>


Esta etiqueta permite incluir un salto de línea para incluir un segundo párrafo

7. FORMATO DE TEXTO:
7.1 Negrita<b> y </b> (bold):
Etiqueta que me permite escribir texto en negrita, incluyéndolo dentro de las etiquetas
<b>BIENVENIDOS A LA UMB</b>
Obtenemos este resultado:
BIENVENIDOS A LA UMB

7.2 Cursiva <i> e </i> (ITALICA)


Podemos escribir texto en cursiva incluyéndolo dentro de las etiquetas

<i>BIENVENIDOS A LA UMB</i>
23
Obtenemos este resultado:
BIENVENIDOS A LA UMB

7.3 Subrayado <u> y </u>


HTML nos proporciona para el subrayado el par de etiquetas, (underline).

<u>BIENVENIDOS A LA UMB</u>
Obtenemos este resultado:
BIENVENIDOS A LA UMB

7.4 Color, Tamaño y Tipo de Fuente:


La etiqueta utilizada para aplicar color, tamaño y tipo es de fuente es <font></font>.
Dentro de esta etiqueta debemos especificar los atributos correspondientes a cada uno
de estos parámetros que deseamos definir. Esta etiqueta puede ir acompañada de:

o Color- Específico el color de la fuente.


o Size -Específica el tamaño de la fuente.
o Face -Específica el tipo de fuente.

Si se necesita que todo el texto de una página Web tenga un mismo color se debe
utilizar dentro de la etiqueta <body>el atributo text quien es el que determina el color
del texto así:

<body text=Green>Texto de la página</body>

7.5 Línea Horizontal <hr>


Dibuja una línea automáticamente, con una apariencia de tercera dimensión, es una
etiqueta es especial, porque no necesita de cierre, tiene los siguientes atributos:
 ALIGN: Establece la alineación de la línea LEFT,CENTER o RIGHT
 WIDTH: Permite especificar el ancho de la línea (en pixeles o porcentaje).
 SIZE: Permite especificar su tamaño en pixeles.
Veamos un ejemplo de estas herramientas:

Figura 25: Etiqueta <hr>


Fuente: Elaborada por el autor

El resultado será:

24
Figura 26: Etiqueta <hr> vista desde el navegador
Fuente: Elaborada por el autor

Podemos ver en la ejecución del código que tenemos tres líneas:


 Línea de grosor 5, ancho 50%, alineada a la izquierda
 Línea de grosor 2, ancho 80%, sin sombra, alineada a la derecha.
 Línea de grosor 20, ancho 100%.

7.6 <em></em>:
Marca con énfasis sobre la parte más importante de un texto.
7.7 <strong> y </strong>:
Permite hacer en el elemento seleccionado más énfasis (texto en negrita como <b>)
en las partes más importantes de un escrito.
7.8 <small> y </small>
Permite aplicar al texto marcado un tamaño de fuente más pequeño.
7.9 <cite></cite>:
Marca una referencia a un texto (texto en cursiva), se recomienda al autor del texto
citado.
Veamos un ejemplo con estas herramientas

Figura 27: Etiqueta <cite>


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

Figura 28: Etiqueta <cite> vista desde el navegador


Fuente: Elaborada por el autor

25
7.10 <s></s>:
Permite aplicar al texto un tachado con una línea horizontal.
7.11 <q></q>:
Representa una cita textual
7.12 <dfn> y </dfn>:
Permite ver un tooltip o descripción emergente en el elemento seleccionado, es decir
un texto flotante sobre la palabra o frase, en el código siguiente el atributo se aplica a
la palabra HTML y al pasar el mouse sobre la palabra aparece el texto flotante
“Hipertext Markup Languaje”

Figura 29: Etiqueta <dfn>


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

Figura 30: Etiqueta <dfn>vista desde el navegador


Fuente: Elaborada por el autor

7.13<sup></sup>
Crea un superíndice posicionando el texto.

Figura 23: Etiqueta <sup>


Fuente: Elaborada por el autor

26
Y el resultado será el siguiente:

Figura 32: Etiqueta <sup> vista desde el navegador


Fuente: Elaborada por el autor

7.14 <sub></sub>
Crea un subíndice posicionando el texto

Figura 33: Etiqueta <sub>


Fuente: Elaborada por el autor
Y el resultado será el siguiente:

Figura 34: Etiqueta <sub> vista desde el navegador


Fuente: Elaborada por el autor

7.15 <span></span>:
El contenedor "abarcar", sirve para aplicar estilo al texto o agrupar elementos en línea,
creando un cuadro de texto.
7.16 <div> </div>:
Se emplea para definir bloques de contenido de la página, también si se van a incluir
estilos e incluso para realizar operaciones sobre bloques específicos.
Por ejemplo.

Figura 35: Etiqueta <div>


Fuente: Elaborada por el autor

27
Y el resultado será el siguiente:

Figura 36: Etiqueta <div> vista desde el navegador


Fuente: Elaborada por el autor

7.17 <center>Centrar </center>


Se utiliza para centrar el texto o imagen que se encuentren entre allí.

8. LISTAS
8.1 Listas no ordenadas: <ul> y </ul>:
Las listas no ordenadas deben estar dentro de la etiqueta <ul> y </ul>. Cada escrito
que vamos a añadir a la lista, lo haremos dentro de la etiqueta <li> y </li>. Es
importante mencionar que automáticamente se genera un punto como símbolo (•),
aunque es posible definir de forma personalizada un símbolo diferente gracias al
atributo “type”, y personalizar la lista así:

Figura 37: Etiqueta <ul>


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

Figura 38: Etiqueta <ul> vista desde el navegador


Fuente: Elaborada por el autor

28
NOTA: La apariencia depende del navegador, hay algunos navegadores que dan otras
apariencias a estos mismos atributos.

8.2 Listas Ordenadas: <ol> y </ol>:


Al igual que la anterior cada punto de la lista se escribe con la misma etiqueta <li>.
Pero serán ordenadas por números y éstos se irán generando automáticamente, el
atributo “value” permite que la numeración inicie en el número que se necesite.

Figura 39: Etiqueta <ol>


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

Figura 40: Etiqueta <ol> vista desde el navegador


Fuente: Elaborada por el autor

8.3 Lista en Orden Inverso: reversed:


Permiten hacer listas en orden inverso, opuesto.

Figura 41: Etiqueta <ol reversed>


Fuente: Elaborada por el autor

29
Y el resultado será el siguiente:

Figura 42: Etiqueta <ol reversed> vista desde el navegador


Fuente: Elaborada por el autor

8.4 Listas de Definiciones: <dl></dl>, <dt></dt>y <dd></dd>:


Permiten hacer un listado de definiciones así:
La etiqueta <dl> Del término inglés “Definiton list” y nos indica que va a ir una
definición.
La etiqueta <dt> Del término inglés “Definition term” y nos muestra el término que
vamos a definir.
La etiqueta <dd> Del término inglés “Definition description” y nos dice que dentro de
ésta irá la definición.
Si se necesitan varios listados de definición, éstas se separarán automáticamente.

Figura 43: Listas de Definiciones


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

30
Figura 44: Listas de Definiciones vista desde el navegador
Fuente: Elaborada por el autor

Ejercicio 3:
El estudioso debe realizar una hoja de vida teniendo en cuenta lo visto en clase (ver
imagen)
 Debe agregar color de fondo y firma.
 Debe cambiar los datos de la persona que aparece por los propios y además
completar, de manera independiente y siguiendo el mismo esquema, la información.
 El archivo se guardará en una carpeta creada por el estudioso, la cual llevará
nombre_hojadevida.html y cuyo objetivo final es almacenar los ejercicios creados
en el módulo.

31
Figura 45: Ejercicio 2
Fuente: Elaborada por el autor
32
Competencias
“El estudioso estará en la capacidad practicar la utilización de etiquetas para dar
formato al texto y utilizar diferentes tipos de listas”

9. TABLAS <table></table>.
Permiten insertar una tabla, teniendo en cuenta que las celdas, las columnas y las
características de cada uno de los aspectos de la tabla se definirán así:
o bgcolor: Define el fondo de la tabla.
o background: Permite poner una imagen de fondo. Es importante saber que si la
imagen es más pequeña que la tabla, ésta se repetirá a lo ancho y a lo largo.
o border. “borderx”: Permite personalizar los bordes en la tabla con "x" siendo la x
un número que indica el grosor. Si no ponemos borde o escribimos "0", la tabla no
mostrará ningún borde
o bordercolor: Permite dar color al borde.
o width: Indica el ancho de la tabla, en píxeles (width= "300") o en porcentaje (width=
"100%").
o cellspacing: Define el espacio entre las celdas de la tabla.
o cellpadding: Le marca a la tabla el espacio que debe dejar alrededor del texto.

9.1 Las Filas: <tr>y</tr>:


o Valign: Permite alinear verticalmente el contenido de las celdas, acompañados de
los atributos:
 ("top"), Este atributo permite alinearlo arriba de la celda,
 ("middle") en el centro
 ("bottom"). Debajo
o Align: Permite alinear horizontalmente el contenido de las celdas e ira acompañado
de los atributos:
 ("center") Atributo que permite alinear el contenido de las celdas en el centro.
 ("left") Atributo que permite alinear el contenido de las celdas a la izquierda.
 ("right") Atributo que permite alinear el contenido de las celdas a la derecha.
 ("justify") Atributo que permite justificar el contenido de las celdas.
 ("bgcolor") y ("bordercolor") Permite aplicar a las celdas color de fondo y el
color del borde.
9.2 Las Celdas <td> y <td>:
o Valign: Permite alinear verticalmente el contenido de las celdas, acompañados de
los atributos:
o align: Permite alinear horizontalmente el contenido de las celdas e ira
acompañado de los atributos:
- colspan: Permiten crear celdas que se extienden varias columnas.
- rowspan: Permite unir celdas de varias filas.

33
9.3 Las Celdas<th> y </th>:
Admiten los mismos atributos que las etiquetas <td> antes mencionadas y funcionan
de la misma forma, se debe tener en cuenta que el contenido que esté dentro de una
etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará
en negrita y centrado automáticamente.
Por ejemplo:

Figura 46: La celdas


Fuente: Elaborada por el autor

Y el resultado será el siguiente:

Figura 47: La celdas, vista desde el navegador


Fuente: Elaborada por el autor

Competencias
“El estudioso estará en la capacidad practicar y utilizar etiquetas para construir tablas
básicas y avanzadas”

Ejercicio 4:
El estudioso debe realizar una agenda telefónica utilizando la etiqueta <table> y sus
atributos, teniendo en cuenta lo visto en clase (ver imagen)
 Debe agregar 10 datos de 10 estudiantes más.
 El archivo se guardará en la carpeta creada por el estudioso donde están las demás
actividades, el nombre del archivo será: nombre_tabla.html y cuyo objetivo final es
almacenar los ejemplos y ejercicios creados en el módulo.

34
Figura 48: Ejercicio
Fuente: Elaborada por el autor

Competencias
“El estudioso estará en la capacidad realizar tablas básicas, utilizar etiquetas modificar
las celdas y filas”

10. ENLACES
Los enlaces son conocidos también como anclas, hipervínculos, link o hiperenlaces,
permiten al usuario final ir de un lado a otro en su página web o en su sitio web, es
decir nos da la navegabilidad en el sitio.
10.1 Enlaces Internos:
Permiten ir de un lugar a otro dentro de la misma página Web. Este tipo de enlaces se
utiliza generalmente en páginas donde el acceso a los contenidos es de gran tamaño,
mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder
rápidamente al principio o final de la página o bien a diferentes párrafos o secciones.
Para crear un enlace de este tipo es necesario, crear un enlace de origen y un enlace
destino.
Con la etiqueta <a href="#origen">Inicio</a> definimos el enlace origen y con la
etiqueta <a name="Destino">Siguiente</a> definimos el enlace destino.

10.2 Enlaces Locales:


Un sitio web está compuesto por varias páginas Web conectadas entre sí. Para crear
este tipo de enlaces, utilizamos el siguiente código:
<a href=”archivo.html”>contenido</a>
Por lo general los sitios Web están organizados por carpetas, cada una de estas
carpetas contienen los diferentes componentes de la página, imágenes, sonidos,
videos etc. Es importante resaltar que se debe especificar el nombre del archivo y
también el directorio o carpeta donde esta nuestro archivo.html es decir la ruta o path.
35
10.3 Enlaces Externos:
Es un link a otro sitio web en Internet, es decir cuando ponemos un vínculo externo,
escribimos la dirección completa de la página incluido http://www.... Estas rutas que
incluyen http://... son denominadas rutas absolutas. Por ejemplo,
<a href="http://www.google.com">Ir al buscador o sitio web de google.com</a>

11. ARCHIVOS DE IMAGEN, AUDIO Y VIDEO.

11.1 Archivos de Imagen.


Hasta el momento solo hemos realizado páginas web planas, es decir solamente
texto. Pero una página web hoy en día no solamente debe tener texto también tener
sonidos, imágenes, videos con el objetivo de llamar la atención del visitante o usuario
final.

Etiqueta <img>: Nos sirve para insertar una imagen y va acompañada de los
siguientes atributos src para indicar la ubicación de la imagen y alt aporta un texto
alterno que representa a la imagen para personas con discapacidad visual.

Por ejemplo:

<img src= “dirección de la imagen” alt=”texto alterno”>

Nota: La etiqueta <img> tiene abertura como todas la etiquetas pero no es necesario
el cierre de la misma, sin embargo le podemos indicar al navegador que la etiqueta
está cerrada añadiendo una barra (/ ) de la siguiente forma

< img src= “dirección de la imagen”alt=”texto alterno”/>

Ejercicio 5.
1. El estudioso debe crear una carpeta llamada imágenes
2. El siguiente texto se copiara en el bloc de notas de Windows.

36
Figura 49: Etiqueta <img>
Fuente: Elaborada por el autor

3. Dentro de la carpeta debe guardarse el archivo .html con el nombre


Página con imagen.html
4. En un buscador de internet (www.google.com) o el que desee buscamos la imagen:
Superman html5.
Fuente:https://mohdolatejuaspire.files.wordpress.com/2012/10/superman-html5.jpg
5. Al encontrar la imagen, se guarda con el nombre html5.jpg dentro de la carpeta
creada

Figura 50: explorador de Windows con la carpeta imágenes


Fuente: Elaborada por el autor

6. Al ejecutar el archivo página con imagen.html, el resultado será el siguiente (ver


imagen):

37
Figura 51: Primera página Web con Imagen
Fuente: Elaborada por el autor

7. El estudioso debe cambiar el nombre al título del sitio web.


8. Debe centrar la imagen, y justificar el texto.
9. Debe aplicar alineación y color (cada párrafo por separado).
10. Insertar otra imagen en la parte inferior del sitio web

Competencias
“El estudioso estará en la capacidad realizar una página web, donde inserte imágenes”

11.1.1 Elementos de la Imagen

o La etiqueta <figure>: Esta etiqueta determina una imagen u objeto que se


relacionan con el documento, puede contener una fotografía diagrama, tabla o
ilustración entre otros objetos.

- La etiqueta <figcaption>: Esta expone la leyenda que acompaña el objeto figura,


es decir el pie de foto.

Ejercicio 6.
38
1. Abrir el bloc de notas y escribimos lo siguiente.

Figura 52: Etiqueta <figure>


Fuente: Elaborada por el autor

2. En la carpeta llamada imágenes creada en el ejercicio anterior se guarda el archivo


con el nombre de mariposa.html
Realizamos la búsqueda de la imagen por un buscador de internet. Fuente:
http://www.iowall.net/mariposas-reales.html
Y el resultado será el siguiente:

39
Figura 53: Etiqueta <Figure> vista desde el navegador
Fuente: Elaborada por el autor

3. El estudioso debe cambiar el nombre al título al sitio web.


4. Debe alinear la imagen a la derecha, y justificar el texto.
5. Debe aplicar alineación y color al texto escrito.
6. Insertar otra imagen de la mariposa monarca con extensión .png en la parte inferior
del sitio web.

Competencias
“El estudioso estará en la capacidad realizar una página web, donde inserte imágenes
con diferentes extensiones y diferentes atributos de formateo de texto”

Ejercicio 7:
El estudioso debe visitar el sitio: http://www.emezeta.com/articulos/formatos-de-
imagen-guia-de-optimizacion y realizar lo siguiente:
1. Defina que es un formato de imagen
2. Elabore un cuadro comparativo entre los formatos jpg, bmp, gif, png
3. De acuerdo a la lectura, escriba cuales formatos de imagen recomienda para una
página web y explique ¿por qué?

Competencias
“El estudioso estará en la capacidad consultar y analizar las diferentes extensiones de
los archivos de imagen utilizadas en la construcción de una página web”

40
11.2 Archivo de Audio.
El objetivo de etiqueta audio es cargar y ejecutar los archivos a de audio sin solicitar
un plug-in de Flash.

Los navegadores (clientes) soportan las siguientes extensiones de audio (mp3, wav,
ogg, au).

Etiqueta <audio></audio>:
Esta etiqueta nos permite reproducir audio. Expliquemos los atributos de la etiqueta:

 src: Enlaza el archivo de audio que el usuario quiere reproducir.


 Controls: Permite efectuar los controles del reproductor por defecto del navegador
como, botón pause, botón play y volumen.
 Autoplay: Atributo que permite que el navegador comience a reproducir el sonido
automáticamente.
 Preload: Atributo que permite iniciar la descarga del archivo de audio cuando el
usuario abre la página web. (antes que inicie la reproducción).
 Loop: Atributo que permite que el archivo de audio se reproduzca nuevamente.
 autobuffer: En caso de estar vigente muestra que primero debe descargarse el
archivo en el cliente (navegador) antes de iniciar a ejecutarse.

Se puede observar, es muy sencillo para empezar a trabajar con esta etiqueta con
los atributos.

41
Figura 54: Etiqueta <audio>
Fuente: Elaborada por el autor

Source:
Esta etiqueta nos permite mirar en que formato puede reproducir el navegador
(cliente) donde este abriendo su página web. Los primero es examinar la primera
fuente y comprobar que puede reproducir dicho archivo en caso de que no lo pueda
reproducir continua con la siguiente fuente.

Ejercicio 8.
El estudioso debe visitar el sitio web:
http://www.desarrollomultimedia.es/articulos/tipos-de-formatos-o-archivos-de-
audio-y-codecs.html y realizar lo siguiente:

1. Defina que es un formato de sonido


2. Elabore un cuadro comparativo entre los formatos mp3, acc, ogg, wma, wave mid
3. De acuerdo a la lectura, escriba cuales formatos de sonido recomienda para una
página web y explique ¿por qué?

Competencias
“El estudioso estará en la capacidad consultar y analizar las diferentes extensiones de
los archivos de audio utilizados en la construcción de una página web”

Ejercicio 9.
1. Crear una carpeta con el nombre sonidos.

42
2. visitar el siguiente sitio web para descargar sonidos (si el estudioso conoce otro sitio
web puede descargarlo).
http://efectos-de-sonido.anuncios-
radio.com/gratis/index.php?option=com_weblinks&catid=76&Itemid=4
3. Descargamos en este caso el sonido de serrucho y lo guardamos en la carpeta
creada, podemos ver que este sonido tiene la extensión mp3.
4. Después estar descargado el sonido lo convertimos a extensión .wav y .ogg.
5. Para convertir el archivo visitamos la siguiente página o link http://online-audio-
converter.com/es/ y lo convertimos a las extensiones que necesitemos, en este
caso .wav y .ogg.

Figura 54: Convertidor de audio online


Fuente: http://online-audio-converter.com/es/

6. Guardamos los tres archivos descargados en la carpeta con el nombre sonidos:

Figura 55: Explorador de Windows con los sonidos en diferente formato


Fuente: Elaborada por el autor

7. Ingresamos a bloc de notas y escribimos el siguiente código y guardamos el


archivo con la extensión .HTML (nombre_sonido.html) en la carpeta sonidos:

43
Figura 56: Ejercicio de Audio
Fuente: Elaborada por el autor

8. Ejecutamos el archivo (en este caso) en Chrome y Explorer y el resultado será:

Figura 57: vista en chrome


Fuente: Elaborada por el autor

Ilustración 3: Vista en Explorer


Figura 58: vista en Internet Explorer
Fuente: Elaborada por el autor

9. El estudioso debe insertar un título al sitio web y realizar el mismo proceso con el
sonido de otra herramienta.

Competencias
“El estudioso estará en la capacidad buscar un sonido, realizar la conversión del
mismo, e insertarlo en una página web”

Ejercicio 10.

44
El estudioso realizara una página web donde muestre al usuario el sonido de tres
animales.
La página tendrá un diseño que debe llevar un título, y las imágenes respectivas de
los tres animales.

Competencias
“El estudioso estará en la capacidad buscar sonidos, realizar la conversión de los
mismos, e insertarlos en una página web”

11.3 Archivo de Video


Esta etiqueta <video>, nos muestra un video sin necesidad de plugin (Flash).
Los navegadores (clientes) soportan las siguientes extensiones de videos
normalmente mp4 en el proceso de Windows Internet Explorer o un formato .ogg/.ogve
en los otros exploradores.

Etiqueta de <video>:
Esta etiqueta nos permite insertar un video de internet o desde un archivo de la
computadora, expliquemos los atributos de la etiqueta:

 Src: Atributo que permite enlazar el archivo o la URL del video que desea utilizar
 Width: Equivale al ancho de pixeles del video.
 Height: Equivale a la altura en pixeles del video.
 Controls: Atributo que muestra los controles de reproductor según sea el
navegador como botón de pause, botón de play y volumen.
 Autoplay: Atributo que permite que el navegador comience a reproducir el video
automáticamente.
 Preload: Atributo que permite iniciar la descarga del archivo de video, cuando el
usuario abre la página web (antes que inicie la reproducción).
 Muted: Atributo que permite reproducir el video sin sonido.
 Loop: Atributo que permite que el archivo de audio se reproduzca nuevamente.
 Poster: Atributo utilizado para mostrar una imagen durante la carga de un video.

45
Figura 59: Etiqueta <video>
Fuente: Elaborada por el autor

La etiqueta video solo permite establecer un atributo src al mismo tiempo. Esto
funciona perfectamente si solo se va a utilizar un formato de archivo. Sin embargo,
para buscar compatibilidad con más de un formato de archivo, y más exploradores,
puedes usar el atributo source.

Por ejemplo:

Figura 60: Etiqueta <video controls>


Fuente: Elaborada por el autor

Type:
Este atributo permite definir qué tipo de video se va a reproducir.

Ejercicio 11.
El estudioso debe visitar el sitio web: http://www.informatica-
hoy.com.ar/multimedia/Todos-los-formatos-de-video.php y realizar lo siguiente:
46
1. Defina que es un formato de video.
2. Elabore un cuadro comparativo entre los formatos mp4, wmv, avi, mpeg4, flv, 3gp
3. De acuerdo a la lectura, escriba que formatos de video recomienda para una página
web y cual no, explique ¿por qué?

Competencias
“El estudioso estará en la capacidad consultar y analizar las diferentes extensiones de
los archivos de video utilizados en la construcción de una página web”

Ejercicio 12.
1. Crear una carpeta que con el nombre video
2. Ingrese a www.youtube.com y busque el video “La Universidad Manuela Beltrán
UMB en video” o por medio del link https://www.youtube.com/watch?v=RuD7-
I6nEMU
3. Descargue el video a su computador, (el estudioso lo puede hacer mediante un
software o sitio web que desee).

Figura 61: video de la Universidad Manuela Beltrán


Fuente: https://www.youtube.com/watch?v=RuD7-I6nEMU

4. Para descargarlo lo pude hacer seleccionando


https://www.youtube.com/watch?v=RuD7-I6nEMU y escribir las letras ss, es
decir que debe quedar así:

Figura 62: búsqueda en barra de direcciones del navegador


Fuente: Elaborada por el autor

47
5. Automáticamente nos llevara al sitio para descargar el video

Figura 63: Video saveform.net


Fuente: saveform.net

6. Para guardar el video con formato con extensión mp4. hacemos clic en la parte
derecha de la página visitada (ver en la imagen la elipse de color rojo).
7. Al descargarse copiamos y pegamos en la carpeta video.

Figura 64: vistas de descargas


Fuente: Elaborada por el autor

8. Cambiar el nombre del archivo descargado en este caso “La Universidad Manuela
Beltrán UMB en video.mp4” por el nombre “UMB.mp4” esto con el fin de tener un
nombre corto y así estar seguro de no equivocarnos en el nombre del archivo.

9. Abrir el bloc de notas y escribir el siguiente código, guardar el archivo con el


nombre video.html

48
Figura 65: Etiqueta <video>
Fuente: Elaborada por el autor

10. Ejecutar el archivo con extensión .html:

Figura 66: Etiqueta <video> Vista desde el navegador


Fuente: Elaborada por el autor

11. El estudioso debe agregar un título a la página web.


12. Buscar en www.youtube.com el video “UMB virtual - video institucional” e
insertarlo en la página web,

Competencias
“El estudioso estará en la capacidad buscar y descargar un video, e insertarlo en una
página web”
49
Ejercicio 13
Usted fue seleccionado para realizar el sitio web de una empresa comercializadora de
instrumentos musicales. Utilizando los conocimientos adquiridos hasta ahora el
estudioso debe realizar cinco páginas web (las cuales componen el sitio web) cada
una de ellas debe contener. Imágenes, Texto, tablas, diferentes tipos de fuente, listas
ordenadas y no ordenadas, las tablas deben tener en sus celdas colores de fondo y
de borde, video y sonidos, y en general todo lo visto en el módulo hasta el momento
La estructura del sitio (cada página web) debe ser:

Sitio web
Nombre

Menú Principal

Página web Página web Página web Página web Página web
Historia Misión Visión Catalogo Proveedores

Figura 67: La estructura del sitio WEB


Fuente: Elaborada por el autor

Es importante mencionar la navegabilidad del sitio, para ello debe contener


hipervínculos del menú principal a cada una de ellas y viceversa.

Competencias
“El estudioso estará en la capacidad de realizar una página web, donde pondrá a
prueba todas las competencias vistas en el módulo, necesarias para la creación y
diseño de una página web”

50
MATERIAL DE APOYO.

- Video Tutorial, aprende a crear el futuro de internet, Comunidad platzi, 2013,


Curso de HTML5 básico. disponible en
https://www.youtube.com/watch?v=RBbviZLKEG0. Consultado (10 marzo de
2015)

- Alfaomega- Marcombo, Aprender HTML5, CSS3 Y JavaScript, con 100


ejercicios prácticos Primera edición 2014, (Recuperado el 17 de marzo de 2015)

- Video institucional Universidad Manuela Beltrán, 2010 disponible en


https://www.youtube.com/watch?v=RuD7-I6nEMU (consultado 11 marzo)

- Sitio de descargas de videos, 2008, consultado en http://es.savefrom.net/ sitio.


(consultado el 10 marzo de 2015)

- Sitio de descarga de sonidos, 2014, disponible en http://efectos-de-


sonido.anuncios-
radio.com/gratis/index.php?option=com_weblinks&catid=76&Itemid=4
(consultado el 10 marzo de 2015)

- Conversor de audio on-line, 2012, disponible en http://online-audio-


converter.com/es/ (consultado el 10 marzo de 2015)

- emezeta.com 1999, Formatos de imagen, Guía de optimización


http://www.emezeta.com/articulos/formatos-de-imagen-guia-de-optimizacion
extensiones de los archivos de sonido. (consultado el 11 marzo de 2015)

- informatica-hoy.com.ar, 2007, Todos los formatos de video disponible en


http://www.informatica-hoy.com.ar/multimedia/Todos-los-formatos-de-
video.php. (consultado el 11 marzo de 2015)

- desarrollomultimedia.es, 2008, Explicamos los tipos de archivos de audio que


existen, para que se utilizan, y algunas características como sus métodos de
compresión, códecs etc. disponible en
http://www.desarrollomultimedia.es/articulos/tipos-de-formatos-o-archivos-de-
audio-y-codecs.html que son archivos de sonido consultado el 11 marzo de
2015)

- 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).

51
- Curso Práctico de HTML5 2012, Cap 01 Estructura Básica de HTML5
disponible en https://www.youtube.com/watch?v=2VKHklZl4-I (Consultado el
5 de marzo de 2015).

52
GLOSARIO

Hipertexto: Definimos el hipertexto como aquel texto que contiene enlaces a otros
documentos.(http://definicion.de)

Multimedia: La multimedia consiste en el uso de diversos tipos de medios para


transmitir, administrar o presentar información. Estos medios pueden ser texto,
gráficas, audio y video, entre otros. (http://www.misrespuestas.com/que-es-
multimedia.html)

Navegador Web: Un navegador es un software utilizado para acceder a internet. Un


navegador te permite visitar páginas web y hacer actividades en ella, como iniciar
sesión, ver contenido multimedia, enlazar de un sitio a otro, visitar una página desde
otra, imprimir, y enviar y recibir correo, entre muchas otras actividades. Los nombres
de los navegadores más comunes del mercado son: Microsoft Internet Explorer,
Mozilla Firefox, Apple Computer's Safari y Opera.
(http://www.allaboutcookies.org/es/faqs/navegador.html)

Ebooks: Es un libro en formato electrónico o digital. Está confeccionado para ser leído
en cualquier tipo de ordenador o en dispositivos específicos como los lectores de tinta
electrónica e, incluso, en ordenadores de bolsillo o teléfonos
móviles.(http://definicion.de)

Frontend: El frontend son todas aquellas tecnologías que corren del lado del cliente,
es decir, todas aquellas tecnologías que corren del lado del navegador web,
generalizándose más que nada en tres lenguajes, Html , CSS Y JavaScript.
(http://serprogramador.es/que-es-frontend-y-backend-en-la-programacion-web/)

Backends: El programador backend es aquel que se encuentra del lado del servidor,
es decir, esta persona se encarga de lenguajes como PHP, Python, .Net, Java, etc, es
aquel que se encarga de interactuar con bases de datos, verificar manejos de sesiones
de usuarios, montar la página en un servidor, y desde este “servir” todas las vistas que
el FrontEnd crea, es decir, uno como backend se encarga más que nada de la
manipulación de los datos.(http://serprogramador.es/que-es-frontend-y-backend-en-
la-programacion-web/)

Mobile Devs: Programador que desarrolla aplicaciones móviles

Community Managers: Es aquella persona encargada o responsable de sostener,


acrecentar y, en cierta forma, defender las relaciones de la empresa con sus clientes
en el ámbito digital, gracias al conocimiento de las necesidades y los planteamientos
estratégicos de la organización y los intereses de los clientes. Una persona que conoce
los objetivos y actuar en consecuencia para conseguirlos.
(http://www.maestrosdelweb.com/que-es-un-community-manager/)

53
Netbooks: Es un tipo de computadora (ordenador) portátil. Se diferencia de los
tradicionales notebooks o laptops por sus reducidas dimensiones, su funcionalidad
limitada y su bajo coste. (http://www.akal.com/ebooks/queesunebook.php)

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)

Path: palabra ruta proviene del francés route, que a su vez deriva del latín rupta. Se
trata de un camino, carretera o vía que permite transitar desde un lugar hacia otro. En
el mismo sentido, una ruta es la dirección que se toma para un
propósito.(http://definicion.de/ruta/)

54
WEBGRAFIA.

- Aula Clic S.L, (Marzo, 2012). Curso de HTML, Recuperado el 12 de febrero de 2015,
en http://www.aulaclic.es/html/t_1_1.htm

- w3schools (1999), HTML5 Tutorial, Recuperado el 12 de febrero de 2015,en


http://www.w3schools.com/html/default.asp

- w3schools (marzo de 1999), HTML5 Tutorial, Recuperado el 15 de febrero de 2015,


en http://www.w3schools.com/tags/tag_doctype.asp

- Instituto nacional de tecnologías educativas y de formación del profesorado, 2001,


recuperado el 16 de marzo de 2015
http://www.ite.educacion.es/formacion/materiales/182/cd/seis/la_etiqueta_div.html

- Mozilla Developer Network and individual contributors, (Octubre de 2005), lista de


Elementos HTML5, Recuperado el 17 de marzo de 2015), en
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

- INEGI para niños: territorio, población y economía de México, (diciembre de 2000),


recuperado el 19 de marzo de 2015 de
http://cuentame.inegi.org.mx/sabiasque/mariposas.aspx?tema=S

- Duiops.net, (abril de 1997), FAQ de Internet, recuperado el 23 de marzo de 2015).


http://www.duiops.net/manuales/faqinternet/faqinternet9.htm .

- Mis Respuestas.com, ¿Qué es multimedia?, (mayo de 2005), recuperado el 23 de


marzo de 2015 de http://www.misrespuestas.com/que-es-multimedia.html

- w3.org, (enero de 1999), Todo sobre las Cookies Preguntas frecuentes, recuperado
el 23 de marzo de 2015 de http://www.allaboutcookies.org/es/faqs/navegador.html

- Akal.com, Enero de 2015, ¿Que es un Ebook?, recuperado el 23 de marzo de 2015


de http://www.akal.com/ebooks/queesunebook.php.

- Serprogramador.es (Enero de 2015) Manejo de templates con HTML5 y JavaScript,


recuperado el 23 de marzo de 2015 http://serprogramador.es/que-es-frontend-y-
backend-en-la-programacion-web/

- maestrosdelweb.com, (enero de 1999), ¿que es un community manager?,


recuperado el 23 de marzo de 2015,http://www.maestrosdelweb.com/que-es-un-
community-manager/

- gmpg.org/xfn/11, (julio de 2008), ¿definición de?, recuperado el 23 de marzo de


2015, de http://definicion.de/netbook/.

55
- gmpg.org/xfn/11, (junio de 1999), ¿definición de?, recuperado el 23 de marzo de
2015, de http://definicion.de/ruta/

56
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.

- Jhon Freddy Vega, Christian Van Des Henst. (2011). Guía HTML5, El presente de
la web. HTML5, CSS3 y Javascript, Cristalab, Colombia, Creative Commons

57

También podría gustarte