Manual de HTML

Windows_Movie Maker_HTML
SISTEMAS OPERATIVOS.
Un Sistema Operativo es el software encargado de ejercer el control y
coordinar el uso del hardware entre diferentes programas de aplicacin y los
diferentes usuarios. Es un administrador de los recursos de hardware del
sistema. Tenemos como ejemplos: Windows, Linux, Mac Os, etc.
Dibuja el Logo de los siguientes sistemas Operativos.
Windows Linux
Qu es un hardware?
___________________________________________________________
______ como por ejemplo: el mouse, el cpu, el teclado, memoria Ram, Disco
Duro, etc
Qu es un software?
___________________________________________________________
________________________________ejemplo: Windows, PowerPoint,
Excel, Word, Corel Draw, Photoshop
Haga un listado de todas las Versiones del Sistema Operativo Windows.
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
Prof. Fredy Martinez Eneque 1

WINDOWS 7
El Sistema Operativo es una pieza imprescindible para nuestro ordenador
ya que sin l ste no puede funcionar. Es decir controla los recursos del
ordenador. En resumen, el sistema operativo es un programa que se encarga
de facilitar el uso del ordenador.
ESCRITORIO DE WINDOWS 7
El Escritorio es la primera pantalla que nos aparece una vez se haya cargado el
Sistema Operativo. La teclas rpidas o atajo para acceder a l cuando lo
tenemos cubierto de ventanas son Windows + D.
En el escritorio tenemos iconos que permiten abrir el programa

correspondiente, normalmente con doble clic.
Dibuja el acceso directo de Paint, Wordpad, Microsoft Excel

EL MEN INICIO
El Botn Iniciar es el botn a travs del cual podemos acceder a todas las
opciones que nos ofrece Windows 7. Si lo seleccionamos se desplegar un men
similar al que te mostramos a continuacin. Se trata del men Inicio. Tambin
podemos acceder a l mediante el teclado pulsando la tecla Windows.
En la parte superior se muestra un pequeo recuadro con la imagen del

usuario, en este caso PROFESOR. Si pasamos el ratn por algn programa
del men Inicio, la imagen ir cambiando a su correspondiente icono.
Si ingresamos a Todos los programas podemos encontrar carpetas,

adems de programas. Tendremos que pulsar una vez sobre la carpeta para
ver su contenido.. En este caso mostraremos Microsoft Publisher 2010 .

LA BARRA DE TAREAS
La Barra de Tareas es la que aparece en la parte inferior de la pantalla. Se
compone del botn Iniciar, a la izquierda, una zona de programas abiertos y
anclados, y por ltimo el rea de notificacin. Ya hemos aprendido para qu sirve
el botn Iniciar en el punto anterior, ahora nos centraremos en el resto de la
barra.
ACTIVIDAD
Responder,Completar o Marcar lo correcto.
1. Windows es
a) Sistema de programas.
b) Sistema Operativo
c) Es un hardware
d) Sistema de Internet.
2. La barra de tareas, los iconos, el botn Inicio son los elementos bsicos del
Escritorio.
3. La pantalla de inicio del sistema operativo Windows se llama ____________
4. Para que hacemos un icono de acceso directo.
___________________________________________________________
_______________________________________________________
5. _________________________________es el lugar donde se almacenan

todos los archivos o carpetas eliminados de la computadora
COMO CREAR ACCESOS DIRECTOS (ICONOS)
Los iconos son accesos directos, se crean para facilitar el ingreso

directamente a ellos, pueden ser accesos a programas, archivos, etc.
Se Puede realizar de varias maneras como veremos a continuacin:
1. Clic en Inicio/Todos los Programas/MicrosoftOffice, Nos colocamos en

Microsoft Excel y se hace clic derecho y luego se Enviar a, luego
Escritorio (crear acceso directo).

2. Si se trata de un archivo como por ejemplo un archivo de Word ,

llamado Tarea que se encuentra en Documentos , vamos a crear un icono
de acceso directo de la sgte manera:_:
Clic en Documentos, luego seleccionamos el archivo Tarea y cli
derecho, Enviar a, Escritorio(crear acceso directo).
Aparece el icono en el escritorio

ACTIVIDAD
Responder, Completar o Marcar lo correcto.
1. Un icono de acceso directo sirve para:
e) Ingresar a un juego sin lentitud.
f) Ingresar a internet rpido
g) Ingresar a un programa o archivo rpidamente
h) Ingresar a una carpeta.
2. Mencione los pasos para crear un acceso directo de un archivo Lista de

Amigos que se encuentra dentro de la siguiente 6to Grado. Paso por
paso.
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
___________________________________________________
3. Crear un acceso directo de 2 archivos de archivos de Word en el escritorio

de nombre Virus_Informatico y el otro Internet que se encuentra dentro de
la carpeta Maria Reyna como se muestra en el ejercicio anterior. En su USB.

EL FONDO DE ESCRITORIO O PANTALLA

El fondo de Escritorio (tambin llamado fondo de pantalla o wallpaper) es la
imagen sobre la cual se sitan los iconos del escritorio. Clic derecho sobre el
escritorio y Personalizar luego aparece esto:
En la parte inferior de la ventana Personalizacin vemos el botn Fondo de

escritorio desde el que podemos cambiarlo. Si pulsamos sobre l se abrir una
ventana como la siguiente:
En la opcin Posicin de la imagen establecemos cmo se mostrar la

imagen en caso de que sus dimensiones no coincidan con las de la pantalla:
Rellenar, Ajustar, Expandir, Mosaico y Centro.

Seleccionar la imagen o buscar una imagen que tengas en tu computadora y

Guardar cambios y listo.
EJERCICIO PRCTICO
1. Configurar la pantalla con los siguientes fondos de escritorio,
configurar para que aparezcan cada 10 segundos,
Nota Obtenida: _________________
CAMBIAR FONDO CON UNA IMAGEN DE INTERNET
Si estamos navegando por internet y nos gusta una imagen tambin
podemos hacer clic con el botn derecho del ratn sobre ella y escoger la
opcin Establecer como fondo. Para escoger las imgenes ms adecuadas
es importante conocer la resolucin y el tamao de nuestra pantalla.

Tambin desde el men contextual podemos Establecer como fondo de
escritorio una foto que estemos visualizando con el Visualizador de
fotos de Windows.
EJERCICIO PRCTICO
1. Ingresar a Internet y descargar 3 imgenes al escritorio, luego
cambiar el fondo del escritorio con estas imgenes descargadas y
configurar para que aparezcan cada 10 segundos.
Nota Obtenida

MOVIER MAKER
Es un programa que sirve para capturar y editar medios digitales
(videos) en el equipo, de tal manera que luego puedas utilizar este material en tus
aprendizajes y exponerlos.
Interfaz de Windows Movie Maker

Es necesario conocer la interfaz de Movie Maker para saber donde esta cada opcin
que se necesita.

Insercin de Colecciones (imagen, video y audio).

Los pasos para insertar elementos a la coleccin. Usaremos como ejemplo la insercin de
imgenes, los pasos para los videos y msica son los mismos exceptuando el primero.


Aplicacin de efectos de transicin

Un programa para crear videos estara incompleto si no tuviera efectos de transicin. Los
efectos de transicin son aquellos efectos que aparecen en el
proceso de pasar de una diapositiva a otra. Realiza los pasos:
Aplicacin de efectos de video

Los efectos de animacin que se aplican a cada una de las diapositivas que contienen
imgenes o video. Realiza los sgtes pasos:

3. Cuando haya arrastrado correctamente el efecto, la estrella que era de color gris ahora ser de
color azul. Repite el mismo paso para los dems.
Guardar proyecto
Antes de guardar como video debemos guardarlo como proyecto. Realiza los
sgtes pasos:
Guardar Archivo de Pelcula

Ya que guardamos el proyecto, ahora podemos guardarlo como pelcula. Realiza los sgtes
pasos:


Para copiar tu video a una memoria USB o grabarla en disco puedes buscarlo en la ubicacin que elegiste para
guardarlo.

QU ES HTML?
HTML son las siglas de HYPERTEXT MARKUP LANGUAGE (Lenguaje de Macado de
Hipertexto), es el lenguaje con el que se escriben las pginas web. Las pginas web
pueden ser vistas por el usuario mediante un tipo de aplicacin llamada navegador.
(Internet Explorer 9). Podemos decir por lo tanto que el HTML es el lenguaje usado por
los navegadores para mostrar las pginas webs al usuario, siendo hoy en da la interface
ms extendida en la red.
Este lenguaje nos permite aglutinar textos, sonidos e imgenes y combinarlos a nuestro
gusto.
ESTRUCTURA BSICA DE HTML
<html> Que significa el Inicio del documento HTML
<head> Que indica el inicio de la cabecera
<title> Que indica el inicio del Titulo
</title> Que indica el fin del Titulo
</head> Que indica el fin de la cabecera
<body> Que indica el inicio del cuerpo
</body> Que indica el fin del cuerpo.
</html> Que indica el fin del documento htm
EDITOR PARA REALIZAR EL CDIGO HTML
Podemos Utiliza el Block de Notas ingresando de la siguiente manera:
- Inicio / Programas / Accesorios / Block de Notas.
La otra manera de ingresar al Block de notas es:
- Inicio / Ejecutar / Luego deber escribir la palabra NOTEPAD / Aceptar.

- Podemos a continuacin ver la estructura sealando las partes:
Cuyo cdigo es el siguiente:

<html>
<head>
<title>Pgina de prueba</title>
</head>
<body>
</body>
</html>
Este cdigo HTML lo grabaremos de la siguiente manera:

1. Archivo / Guardar/
2. Debemos poner el nombre a documento web como por ejemplo: TITULO.HTM
3. Seleccionamos la unidad en la cual vamos a grabar, como por ejemplo si queremos
grabar en el USB, buscaramos en Equipo luego en la unidad respectiva.
4. Guardar.

SINTAXIS DEL HTML

El HTML es un lenguaje que basa su sintaxis en un elemento de base al que llamamos
etiqueta. La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrir las modificaciones que
caracterizan a esta etiqueta. As por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML
escribimos una frase con el siguiente cdigo:
<b>Esto esta en negrita</b>
El resultado Ser:
PARTES DE UN DOCUMENTO HTML
Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>.
Dentro de este documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de
ndole informativo como por ejemplo el titulo de nuestra pgina con la directiva
<title> y </title>.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que ser donde
colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas
como las que hemos visto.
El resultado es un documento con la siguiente estructura:

<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra pgina pero que son importantes para
catalogarla:
Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que ser mostrada por el navegador: Texto e
imgenes
</body>
</html>
Podemos Utilizar dentro de Body el parametro BGCOLOR de la siguiente manera:
<body bgcolor=pink>
y saldr el fondo de color amarillo en la pagina
Las maysculas o minsculas son indiferentes al escribir etiquetas
A notar que las etiquetas pueden ser escritas con cualquier tipo de combinacin de
maysculas y minsculas. <html>, <HTML> o <HtMl> son la misma etiqueta.

PRCTICA CALIFICA N 01 EN CLASE
- Escribir el cdigo correspondiente para obtener la Nota:

siguiente pgina web ponerle cualquier color de
fondo.
- Deber grabar dicha pagina web en su disquette
con el nombre PRACTICA1.HTM
TAREA
Crea las siguientes paginas y Graba segn el nombre indicado en la parte
superior de cada pgina, en su USB

Celeste.html

Verde.html
Celeste.html
FORMATO DE UN TEXTO Y PARRAFO
DE TEXTO
NEGRITA
Podemos escribir texto en negrita incluyndolo dentro de las etiquetas <b> y </b>
(bold).
Escribiendo un cdigo de este tipo:
<b>La paz comienza con una sonrisa nos dice <b>Madre Teresa de Calcuta </b>
Obtenemos este resultado:

ITLICA
Tambin en este caso existen dos posibilidades, una corta: <i> e </i> (italic) y otra un
poco ms larga:
He aqu un ejemplo de texto en itlica:
<i>Texto en itlica</i>
Que da el siguiente efecto:
SUBRAYADO
El HTML nos propone tambin para el subrayado el par de etiquetas: <u> y </u>. Sin
embargo, el uso de subrayados ha de ser aplicado con mucha precaucin dado que los
enlaces hipertexto van, a no ser que se indique lo contrario, subrayados con lo que
podemos confundir al lector y apartarlo del verdadero inters de nuestro texto.
He aqu un ejemplo de texto en itlica:
<u>Texto en subrayado</u>
Que da el siguiente efecto:

SUBNDICES Y SUPRANDICES
Este tipo de formato resulta de extremada utilidad para textos cientficos. Las
etiquetas empleadas son:
<sup> y </sup> para los suprandices
<sub> y </sub> para los subndices
Aqu tenis un ejemplo:

La <sup>13</sup>CC<sub>3</sub>H<sub>4</sub>ClNOS es un heterociclo alergeno
enriquecido
El resultado:

PRCTICA CALIFICA N 02 EN CLASE
Uso correcto de negrita, cursiva, subrayado y Subndices y Nota:
suprandices.
- Escribir el cdigo correspondiente para obtener la siguiente pgina web, ponerle
cualquier color de fondo.
- Deber grabar dicha pagina web en su disquette con el nombre PRACTICA2.HTM
TAREA
Crea la siguiente pagina utilizando los formatos de Nota:
texto y prrafo. Grabar con el nombre
TAREAFORMATO.HTML en su USB.

PARRAFO
Formatear un texto pasa por tareas tan evidentes como definir los prrafos,
justificarlos, introducir vietas, numeraciones, etc...
Para definir los prrafos nos servimos de la etiqueta <p> que introduce un salto y
deja una lnea en blanco antes de continuar con el resto del documento.
..p.htm
<html>
<head>
<title>Ejemplo Parrafo</title>
</head>
<body>
A veces cuando rezo es como si Dios estuviese en todas partes cerca de m - tan cerca
que no me gusta decir amen. Decir amn es como si terminase una conversacin
telefnica con El. Digo yo que sera estupendo si, en vez de colgar el telfono,
pudisemos dejar el telfono descolgado para siempre. <p>
As, cada vez que nos acercsemos al telfono para escuchar, escucharamos a Dios
respirando el otro lado del telfono
</body>
</html>
Saldr de esta forma:

Podemos tambin usar la etiqueta <br>, de la cual no existe su cierre
correspondiente (</br>), para realizar un simple retorno de carro con lo que no
dejamos una lnea en blanco sino que solo cambiamos de lnea.
..br.htm
<html>
<head>
<title>Uso de BR</title>
</head>
<body>
Conocer el grado del amor con el que Jess Cristo nos ama <br>
nos debera hacer quererle de tal forma que quedase reflejado <br>
en nuestros actitudes, nuestra conducta y nuestro compromiso. <br>
La madurez espiritual se demuestra cuando sabemos activar nuestro conocimiento
espiritual <br>
</body>
</html>

COL
OR, TAMAO Y TIPO DE LETRA
Lo trabajamos con la etiqueta <Font>. A continuacin os comentamos los atributos
principales de esta etiqueta:
ATRIBUTO FACE
Define el tipo de letra. Este atributo es interpretado por versiones de Netscape a
partir de la 3 y de MSIE 3 o superiores. Otros navegadores las ignoran completamente
y muestran el texto con la fuente que utilizan.
Veamos un ejemplo.
<font face="Comic Sans MS,arial,verdana">Este texto tiene otra tipografa</font>
Que se visualizara as en una pgina web.
ATRIBUTO SIZE
Define el tamao de la letra. Este tamao puede ser absoluto o relativo.
Si hablamos en trminos absolutos, existen 7 niveles de tamao distintos numerados de
1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra ms
pequea o size="7" para la ms grande.
<font size=4>Este texto es ms grande</font>
Este texto es ms grande
ATRIBUTO COLOR
Podis entender cmo funciona esta numeracin y cules son los colores que resultan
ms compatibles a partir de este artculo: Los colores y HTML.
Por otra parte, es posible definir de una manera inmediata algunos de los colores ms
frecuentemente usados para los que se ha creado un nombre ms memotcnico:
Nombre Color

Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
<html> <head> <title>Lista numerada</title> </head>

<body>
<font size=6> Per<br>
<font color=green width=x> Chile<br>
<font color=green width=6> Ecuador<br>
<font color=red width=x> Venezuela<br>
<font color=blue width=x> Bolivia<br>
<font color=yellow width=x> Argentina<br>
<font color=pink width=x> Uruguay<br>
<font color=skyblue width=x> Paraguay<br>
</body>
</html>

PRCTICA CALIFICA TAREA
Utilizar los diferentes tamaos y colores de fuente segn el Nota:
texto

- Deber grabar dicha pagina web en su USB con el nombre COLORES.HTML


ALINEACIN DE PRRAFO
As, si desesemos introducir un texto alineado a la izquierda
escribiramos:
<p align="left">Texto alineado a la izquierda</p>
El resultado sera:
Texto alineado a la izquierda

Para una justificacin al centro:
<p align="center">Texto alineado al centro</p>
que dara:
Texto alineado al centro
Para justificar a la derecha:
<p align="right">Texto alineado a la derecha</p>
cuyo efecto sera:
Texto alineado a la derecha
Encabezado de nivel
Tenemos desde <H1> hasta <H6>
Un ejemplo sera:
.encabezado.htm
<html>
<head>
<title>Todos los encabezados</title>
</head>
<body>
<h1>Encabezado de nivel 1</h1>
</body>
</html>

PRCTICA CALIFICA N 03 TAREA
Utilizar las diferentes directivas utilizados para el texto y el Nota:

prrafo.

- Deber grabar dicha pgina web en su USB con el nombre PRACTICA3.HTM

TAREA
Utilizar los alineamientos para el texto y el prrafo y guardar Nota:

en el USB con el nombre TAREA_ALINEA.HTML

LNEAS HORIZONTALES
Si deseamos insertar una lnea horizontal en nuestra pgina web, entonces debemos
usar la etiqueta <HR> (que viene de las siglas regla horizontal), la cual nos dar una
manera til de separar secciones en el documento, las propiedades ms comunes
podemos usar en la etiqueta <HR> son las siguientes:
Atributo Lo que hace
<hr width=x> Fija el ancho de la lnea en x pxeles.
<hr width=x%> Fija el ancho de la lnea en x por ciento de la pantalla.
<hr size=n> Fija el grosor de la lnea en n unidades.
<hr align=left> Alinea la lnea con el margen izquierdo.
<hr align=center> Centra la lnea.
<hr align=right> Alinea la lnea con el margen derecho.
<hr noshade> Despliega la lnea sin sombra.
Ejemplo:
<html>
<head>
<title>Lista numerada</title>
</head>
<body>
Per <Hr color=green width=x>
Chile <Hr color=green width=6>
Ecuador <Hr color=red width=x>
Venezuela<Hr color=blue width=x>
Bolivia <Hr color=yellow width=x>
Argentina <Hr color=pink width=x>
Uruguay <Hr color=skyblue width=x>
Paraguay
</body>
</html>

Por lo tanto el resultado ser el siguiente:
LISTAS
Si deseamos incluir listas en nuestra pgina web, HTML cuenta con algunas Etiquetas
que estn diseadas para darle ms control sobre la construccin de listas, hay tres
estilos de listas: listas numeradas, listas con vietas y listas de definicin. A
continuacin vamos a ver los puntos bsicos de cada tipo de lista y varios ejemplos.
Lista numeradas
Si deseamos incluir una lista numerada de elementos, no tenemos que agregar los
nmeros nosotros, basta con utilizar las listas de orden en HTML.
Las listas de orden (Ordered List) emplean dos tipos de etiquetas:
La lista inicia con la etiqueta <OL> y termina con </OL>
Cada elemento de la lista debe llevar al inicio la etiqueta <LI> ( List Item).
El formato general es el siguiente (Fig. 3.1):
..ol.htm
<html>
<head>
<title>Lista numerada</title>

</head>
<ol>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
<li>Cuarto elemento
</ol>
</body>
</html>
Listas con vietas

Es probable que en lugar de nmeros deseemos utilizar vietas. Las etiquetas HTML
para crear listas con vietas son muy parecidas a las que se emplean para las listas
numeradas. Como antes, cada elemento de la lista lleva la etiqueta <LI>, pero ahora la
lista debe ir entre las etiquetas <UL> y </UL>. Por qu UL?, pues esto deriva de lista
desordenada (Unordered List). Este es el formato (Fig. 3.2):
ul.htm
<html> <head>
<title>Lista vietas</title></head>
<body>
<ul>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
<li>Cuarto elemento
</ul>

</body>
</html>
PRCTICA CALIFICA N 04 - TAREA

Utilizar las diferentes directivas de Listas Nota:
Deber grabar dicha pgina web en su USB con el nombre
PRACTICA4.HTM

IMGENES
Para insertar imgenes en nuestras pginas web existe la etiqueta <IMG> que le
indica al navegador que debe desplegar una imagen. Veamos un ejemplo:
<img src=NombreDeArchivo>
Donde, SRC es una abreviatura de source (fuente) y NombreDeArchivo es
el nombre de la imagen que deseamos desplegar. Por ejemplo si deseamos
desplegar una imagen que se llama insignia.jpg El cdigo HTML sera:
si la imagen estuviera en el USB(E:)
<img src=e:\insignia.jpg>
si la imagen estuviera en el disco duro (C:)
<img src=c:\insignia.jpg>
Las imgenes en nuestra pgina son muy tiles y necesarias, pero no por eso
debemos saturar nuestra pgina de estas. No olvidemos que muchos de nuestros
visitantes ingresarn por medio de una lnea telefnica normal, lo cual nos trae
un tiempo de carga muy lento si hay demasiadas imgenes y nuestros visitantes
se cambiarn de pgina, la cantidad de imgenes recomendada para una pgina
es que no excedan en tamao los 30 kb. porel total de imgenes.

PRCTICA CALIFICA N 05 - CLASE
- Ingresar al Bloc de Notas y escribir el cdigo HTML para crear la siguiente
pagina web y guardar con el Nombre ANIMALES.HTML en su USB.

- Las imgenes podr bajarlas de Internet, sino encuentran la misma imagen
podrn buscar otra.

- Deber escribir el cdigo HTML que utiliz en el bloc de notas en el cuadro

que ver a continuacin.
- Todas las etiquetas deber escribirlas de color rojo, el resto de color azul.

TAREA
Utilizar las diferentes directivas de Listas, y grabar en el USB Nota:

con el nombre TAREAIMAGENES.HTML

TABLAS
La informacin contenida en una tabla estar contenida entre las etiquetas:
<TABLE BORDER=n> y </TABLE>
Donde BORDER=n indica el grosor del borde de la tabla. Cuando n es 0 la tabla se
visualizar sin borde y a medida que dicho nmero se incremente, el borde ser de
mayor grosor.
Cada vez que se inicie una fila de la tabla, podremos la etiqueta <TR>.
Despus de la etiqueta <TR>, podemos ponerle ttulo a las columnas con la etiqueta
<TH>. Vemos el ejemplo (Fig. 6.1):
Podemos introducir una nueva fila (etiqueta <TR>), fijando la informacin entre las
distintas celdas por medio de la etiqueta <TD>
..tabla1.htm
<html>
<head>
<title>Tablas 1</title>
</head>
<body>
<font color =red>
<TABLE BORDER=1>
<TR><TH><font color =red>Nombre<TH><font color =red>Apellido
<TR><TD><font color =blue>Abigail<TD><font color =blue>Morales
<TR><TD><font color =blue>Pedro<TD><font color =blue>Santana
</TABLE>
</body>
</html>

Observe como los encabezados de las columnas (TH) aparecen en negrita y
centrados, mientras que el texto de las celdas (TD) aparece sin resaltar y alineado a la
izquierda.
La alineacin del texto en las celdas puede especificarse ampliando la etiqueta
<TD> segn: <TD Align="left|center|right">texto de la celda</TD> De igual forma, los
encabezados de las columnas pueden alinearse segn: <TH Align="left|center|
right">texto del encabezado
Recordamos tambin que podemos insertar tambin imgenes como
muestro en el siguiente ejemplo:
1. Descargo 2 imgenes de internet

2. Las guardo en el USB (unidad F para el ejemplo)
3. Escribir el siguiente cdigo HTML.
<html> <head><title>Tablas 1</title></head>

<body>
<font color =red>
<TABLE BORDER=1>
<TR><TH><font color =red>Virgen Mara<TH><font color =red>Jess
<TR><TD><font color =blue><img src=f:\maria.jpg>
<TD><font color =blue><img src=f:\jesus.gif>
</TABLE>

</body>
</html>
ATRIBUTOS DE LA TABLA Y CONCLUSIN.

Adems de los atributos especficos de cada celda o lnea, las tablas pueden ser
adicionalmente formateadas a partir de los atributos que nos ofrece la propia
etiqueta <table>. He aqu aquellos que pueden parecernos en un principio
importantes:
align Alinea horizontalmente la tabla con respecto a su entorno.

background Nos permite colocar un fondo para la tabla a partir de un
enlace a una imagen.

bgcolor Da color de fondo a la tabla.
border Define el nmero de pixels del borde principal.
bordercolor Define el color del borde.
cellpadding Define, en pixels, el espacio entre los bordes de la celda y el
contenido de la misma.
cellspacing Define el espacio entre los bordes (en pixels).
height Define la altura de la tabla en pixels o porcentaje.
width Define la anchura de la tabla en pixels o porcentaje.

TABLAS ANIDADAS
Muy til tambin es el uso de tablas anidadas. De la misma forma que podamos
incluir listas dentro de otras listas, las tablas pueden ser incluidas dentro de
otras. As, podemos incluir una tabla dentro de la celda de otra. El modo de
funcionamiento sigue siendo el mismo aunque la situacin puede complicarse si el
nmero de tablas embebidas dentro de otras es elevado.
Vamos a ver un cdigo de anidacin de tablas. Veamos primero el resultado y

luego el cdigo, as conseguiremos entenderlo mejor.
Este sera el cdigo:

<table cellspacing="10" cellpadding="10" border="3">
<tr>
<td align="center">
Celda de la tabla principal
</td>
<td align="center">
<table cellspacing="2" cellpadding="2" border="1">
<tr>
<td>Tabla anidada, celda 1</td>
</tr>
<tr>


</tr>
</table>
</td>
</tr>
</table>
TAREA
Utilizar las diferentes directivas de Listas, y grabar en el USB Nota:

con el nombre TABLA_ANI1.HTM
Animales en peligro de extincin

Nombre Cabezas Previsin 2010 Previsin 2020
Ballena 6000 4000 1500
Oso Pardo 50
0
Lince 10
Tigre 300 210
Escribir su cdigo fuente

FORMULARIOS
Un formulario es una pgina con cuadros de texto, listas desplegables, botones de
comando, etc., para obtener informacin de los visitantes a nuestra pgina.
Los formularios se crean empleando etiquetas especiales, y es muy fcil configurarlos.
Todo formulario comienza con la etiqueta:
<FORM ACTION="ArchivoScript" METHOD="post/get">
Con ACTION indicamos el script que va procesar la informacin que recogemos en el
formulario (si deseas conocer algn lenguaje de script que puedas usar puedes visitar
http://www.pecesama.net/php/ o http://www.pecesama.net/asp/), mientras que
METHOD nos indica la manera en que se enviarn los datos post o get. La etiqueta
</FORM> indica el final del formulario.
A partir de la etiqueta <FORM> vienen los campos de entrada de datos que pueden
ser:
CUADRO DE TEXTO:
Para las entradas de texto sencillas, como el nombre o direccin de una
persona, hay que usar cuadros de texto:
<input type="text" name="nombre" size="20" value="jose">
Veamos un ejemplo:
<HTML>
<HEAD></HEAD>
<BODY>
<FORM METHOD=GET ACTION=>
Ingrese Nombre <input type="text" name="nombre" size="20" ><br><br>
Ingrse Apellido <input type="text" name="apellido" size="20" ><br><br>

INgreses su direccion<input type="text" name="direccion" size="20" ><br><br>
</FORM>
</BODY>
</HTML>
Aparecer de la siguiente manera
CUADRO DE TEXTO CON BARRAS DE DESPLAZAMIENTO:
Si necesita que sus visitantes escriban una gran cantidad de texto o entradas de varias
lneas, lo mejor es emplear el rea de texto en lugar de
un cuadro de texto:
<textarea rows="5" cols="20">Es de color rojo</textarea>
Ejemplo:
<HTML>
<HEAD></HEAD>
<BODY>

<textarea rows="5" cols="20">Es de color rojo y blanco de bandera de nuestro Per
</textarea><br>
</FORM>
</BODY>
</HTML>
CASILLA DE VERIFICACIN O CHECKBOX:
Los checkboxes son la mejor solucin para ofrecer listas de opciones, que se pueden
seleccionar o no poniendo una pequea marca en la casilla correspondiente. Cada uno de
los checkbox se comporta de forma independiente a los dems.
Se insertan con la etiqueta:
<input type="checkbox" name="cambiar" value="ON">
Ejemplo:
<HTML>
<HEAD></HEAD>
<BODY>
Tu hobie cual es:<br>

<input type="checkbox" name="bailar" value="ON"> Bailar<br>

<input type="checkbox" name="chatear" value="ON"> Chatear<br>
<input type="checkbox" name="cantar" value="ON"> Cantar<br>
<input type="checkbox" name="estudiar" value="ON"> Estudiar<br>
</FORM>
</BODY>
</HTML>
BOTN DE RADIO U OPCIN:
Los botones de radio tambin permiten activar o desactivar opciones; sin embargo, a
diferencia de los checkboxes, es posible agrupar varios elementos en un grupo de
botones radio, de forma que slo es posible elegir una de todas las opciones
disponibles.
<input type="radio" value="azul" checked name="color">
Para crear un grupo de botones radio, se insertan tantas etiquetas <INPUT
TYPE=radio> como opciones existan. Todas ellas deben llevar un NAME igual, pero un
VALUE diferente. La agrupacin de los botones se realiza por su nombre; por eso, un
grupo de botones puede estar distribuido en cualquier posicin de un formulario.

Ahora veamos un ejemplo
<HTML>
<HEAD></HEAD>
<BODY>
Tu Signo cual es:<br>
<input type="radio" value="capricornio" checked name="color">Capricornio<br>
<input type="radio" value="cancer" checked name="color">Cancer<br>
<input type="radio" value="aries" checked name="color">Aries<br>
<input type="radio" value="acuario" checked name="color">Acuario<br>
<input type="radio" value="piscis" checked name="color">Geminis<br>
<input type="radio" value="Geminis" checked name="color">Germinis<br>
</FORM>
</BODY>
</HTML>

BOTN DE COMANDO:
Cuando se da clic sobre este botn, los datos del formulario son enviados al script
especificado por el atributo ACTION de la etiqueta <FORM>.
<input type="submit" value="enviar" name="enviar">
Ejemplo
<HTML>
<HEAD></HEAD>
<BODY>
Ingrese su nombre <input name=nombre><br>
<input type="submit" value="enviar" name="enviar">
</FORM>
</BODY>
</HTML>

MEN DESPLEGABLE:
Permiten seleccionar una o varias opciones de entre una lista desplegable. La etiqueta
<SELECT> crea el campo de seleccin; dentro del mismo se aaden las diferentes
opciones disponibles con <OPTION>. El ancho de la ventana de seleccin se ajusta al
ancho de la opcin de mayor tamao que se incluya. El nmero de opciones visibles
simultneamente se controla con el atributo SIZE.
El caso ms sencillo es el de seleccin simple:
<select size="1" name="dia">
<option selected value="lunes">lunes</option>
<option>martes</option>
<option value="miercoles">miercoles</option>
</select>
Saldr as:

Es posible asignar a cada elemento de la seleccin un nmero o nombre con el atributo
VALUE; este valor slo tiene inters para la aplicacin que procesar el formulario.
Para permitir la seleccin simultnea de varios elementos de una lista, se incluye el
atributo MULTIPLE. De esta forma, y combinando el ratn y la tecla Control, es
posible activar simultneamente varias opciones. En este caso, el browser muestra
automticamente una ventana de seleccin en la que se ven todas las opciones
disponibles.
Ahora veamos un ejemplo ms complejo, una pgina que pregunta opciones para armar
una computadora.
form_compu.htm
<HTML>
<HEAD></HEAD>
<BODY>
Elige la computadora a comprar
<BR>
<BR>
<SELECT NAME=compu>
<OPTION>Pentium IV</OPTION>
<OPTION>Celeron</OPTION>
<OPTION>Dual Core</OPTION>
<OPTION>Core 2 Duo</OPTION>
<OPTION>Core I3</OPTION>
</SELECT>
<BR>
<BR>
<BR>
<BR>
<BR>
<BR>

Selecciona los dispositivos de la computadora?

<BR>
<BR>
<SELECT NAME=dispo[] MULTIPLE>
<OPTION>KIT MULTIMEDIA</OPTION>
<OPTION>QUEMADORA</OPTION>
<OPTION>WEB CAM</OPTION>
<OPTION>MICROFONO</OPTION>
</SELECT>
<BR>
<BR>
<INPUT TYPE=SUBMIT>
</FORM>
</BODY>
</HTML>

TAREA
Dibuja un formulario y luego escribe el cdigo HTML Nota:
correspondiente para poder crear dicho formulario, grabar
con el nombre FINAL.HTML en el USB, utiliza todas las
herramientas estudiadas sobre formulario y colores.

...formulario1.htm
<HTML><HEAD></HEAD><BODY><B>Minicurriculum </B>
<FORM METHOD=POST ACTION="">
Nombres:
<INPUT NAME="nombres" TYPE="Text">
Apellidos:
<INPUT NAME="apellidos" TYPE="Text">
Edad:
<INPUT NAME="edad" TYPE="Text"SIZE="3">
<BR>
<BR>
Domicilio:
<TEXTAREA NAME="Domicilio" ROWS=4 COLS=40>
</TEXTAREA>
<BR>
<BR>
Que salario deseas ganar?
<SELECT NAME="Salario">
<OPTION VALUE=0> Menos de $1000</OPTION>
<OPTION VALUE=1000>Entre $1,000 y $3,000</OPTION>
<OPTION VALUE=3000>Entre $3,000 y $5,000</OPTION>
<OPTION VALUE=5000>mas de $5,000</OPTION>
</SELECT>
<BR>
<BR>
Como consideras tu desempeo?<BR><BR>
<INPUT NAME="Desempe" TYPE="Radio" VALUE=0>Psimo
<BR>
<INPUT NAME="Desempe" TYPE="Radio" VALUE=5>Regular
<BR>
<INPUT NAME="Desempe" TYPE="Radio" VALUE=10>Excelente
<BR>
<BR>
<INPUT TYPE=SUBMIT VALUE="Presione cuando este listo(a)">
<INPUT TYPE=RESET VALUE="Borra todo">
</FORM>
</BODY>
</HTML>

SONIDO EN HTML
INCLUIR SONIDOS EN LA WEB.
Una vez elegidos nuestros ficheros de sonido, es hora de incluirlos en nuestra

pgina web. Lgicamente, para que un fichero de audio pueda ser reproducido
por un navegador es necesario que su mquina tenga incluida una tarjeta de
sonido y un par de altavoces.
Existen diversas formas de incluir un fichero de audio en una pgina, formas que
dependen del tipo de fichero y del navegador usado, y podemos usar diferentes
etiquetas para cada una de ellas.
BGSOUND
La etiqueta bgsound incorpora sonidos de fondo en una pgina web, sonidos que
se ejecutan automticamente al cargarse la pgina. Es una etiqueta propietaria
de Microsoft, por lo que slo es interpretada por Internet Explorer, admitiendo
los formatos de audio MID y WAV, aunque generalmente tambin acepta AU y
MP3, en versiones actuales del nevagador o mediante plugins de uso general.
Su sintaxis general, con sus atributos ms importantes, es del tipo:
<bgsound src="ruta_fichero" loop="l" balance="b" volume="v"></bgsound>
Donde:
src="ruta_fichero" fija la ruta en la que se encuentra el fichero de audio
a reproducir. La ruta puede ser relativa a nuestro sistema de carpetas
local, absoluta respecto el sistema de carpetas del servidor web o una
URL completa que localice el fichero en Internet.
loop="l" determina el nmero de veces (l) que se debe ejecutar el fichero
de audio. Si le damos el valor infinite, el fichero se reproducir
indefinidamente.
balance="b" determina el balance del sonido entre los dos altavoces del
equipo, es decir, la potencia o intensidad con que se oir en cada uno de
ellos (derecho e izquierdo). Sus valores pueden estar entre -10,000 y

+10,000, correspondiendo el valor 0 a un balance equilibrado entre los dos

altavoces.
volume="v" fija el volumen al que se oir el sonido, y sus valores pueden
variar entre -10,000 (mnimo) y 0 (mximo). No es soportado por los
equipos MAC.
Ejemplo:
<bgsound src="../sonidos/wav.wav" balance=0 volume=0></bgsound>
La etiqueta bgsound admite muchas ms propiedades (disabled, delay, id, class,

controls, etc.). Asmismo, esta etiqueta es accesible en Internet Explorer
mediante cdigo JavaScript, pudiendo modificar en tiempo real sus propiedades
balance, loop, src, y volume, aunque sta ltima slo es accesible en plataformas
PC.
EMBED
Nestcape Navigator implement la etiqueta embed para incorporar ficheros de

audio. Es sta una etiqueta de caracter general, que se usa para la inclusin en
las pginas web de todos aquellos archivos ajenos al navegador y que necesitan
por lo tanto la ejecucin de algn plugin para su interpretacin.
Paradjicamente, Internet Explorer asumi despus el uso de esta etiqueta
para la inclusin de ficheros de audio, para llegar a interpretarla mejor y
ampliarla con ms atributos y propiedades, de tal forma que la ejecucin de
sonidos con embed es actualmente ms cmoda con este navegador, al
incorporar la suite de Microsoft sus propios plugins para la interpretacin de los
diferentes formatos de audio. En cambio, si usamos Netscape Navigator nos
encontraremos en muchos casos con un fallo en la reproduccin o con un
engorroso mensaje de necesidad de algn plugin especial (sobre todo en las
versiones 6x), lo que nos obligar a visitar la pgina de Netscape para su
descarga e instalacin, que muchas veces no ser efectiva.

Sea como sea, hay que indicar que esta etiqueta nos va a incluir en la pgina web
un objeto especial, una especie de consola de mando, denominada Crescendo, que
consta de tres botones, similares al de cualquier reproductor de audio: un botn
Play, para comenzar la reproduccin (si no est establecida a automtica), un
botn Pause, para detenerla momentneamente y un botn Stop, para detenerla
definitivamente (puesta a cero). Esta consola es diferente segn el navegador
usado; en el caso de Internet Explorer se muestra la tpica consola de Windows
Media, cuyo tamao podemos configurar, mientras que en Netscape se muestra
una consola propia, de tamao fijo definido.
La sintaxis general de la etiqueta embed es del tipo:
<embed atributo1="valor1" atributo2="valor2"...atributoN="valorN"></embed>
Y en el caso que nos ocupa, de la inclusin de ficheros de audio, los atributos

podemos dividirlos en dos tipos:
1. Atributos referentes al sonido:

src="ruta_fichero", que fija la ruta en la que se encuentra el fichero de
audio a reproducir. La ruta puede ser relativa a nuestro sistema de
carpetas local, absoluta respecto el sistema de carpetas del servidor web
o una URL completa que localice le fichero en Internet.
loop="l/true/false", que determina el nmero de veces que se debe
ejecutar el fichero de audio. Los valores admitidos son l (nmero entero
de veces), true (infinitas veces) y false (slo una vez). Slo es reconocida
por Netscape Navigator.
playcount="n", que define el nmero de veces (n) que se debe ejecutar en
fichero de audio en el caso de Internet Explorer.
type="tipo_fichero", atributo importante, que declara el tipo de fichero
de audio que estamos usando, con lo que el navegador web puede ejecutar
el programa o plugin adecuado para la reproduccin del fichero. Puede ser
audio/midi, audio/wav, etc.
autostart="true/false", que determina si el fichero de audio debe
empezar a reproducirse por s slo al cargarse la pgina o si por el

contrario ser preciso la actuacin del usuario (o de cdigo de script)

para que comience la audicin.
pluginspage="URL", que establece, en caso de ser necesario un plugin
especial para reproducir el fichero, la pgina web donde se puede
descragar el mismo.
name="nombre", que asigna un nombre identificador (debe ser nico en la
pgina) a una etiqueta embed determinada, con objeto de ser accedida
luego por lenguajes de script.
volume="v", que determina el volumen de reproduccin del sonido, y que
puede variar entre 0 y 100. Navigator, que en la consola muestra el valor
establecido en su indicador de volumen, siendo su valor por defecto 50.
En en caso de Internet Explorer,
2. Atributos referentes a la consola:
hidden="true/false", que establece si la consola va a ser visible (false) o
no (true). Es ste un aspecto polmico, ya que si ocultamos la consola
obligamos al usuario a oir nuestro fichero, sin posibilidad de detenerlo ni
de modificar el volumen, y si la mostramos estaremos incrustando en la
pantalla un objeto que muchas veces nos romper el esquema de diseo de
nuestra pgina. Queda determinar su uso en cada caso concreto.
width="w", que determina el ancho visible de la consola, en pixels.
height="h", que determina el alto visible de la consola, en pixels. Estos
atributos son tambin muy importantes, caso de que hayamos establecido
hidden= "false", ya que de su valor va a depender la correcta visulazacin
de la consola. En el caso de Internet Explorer, que muestra un logo de
Windows Media sobre los controles, el tamao mnimo aceptable debe ser
de 140x100 pixels, ya que si no la consola saldr deformada en exceso o
recortada. Y en el caso de Netscape Navigator, deberemos asignar unos
valores de 145x60 pixels, que es lo que ocupa la consola; si ponemos un
tamao menor, la consola ser recortada, perdiendo funcionalidades, y si
asignamos un tamao mayor, aparecern espacios grises alrededor de la
consola, afeando el aspecto de la pgina. Si no especificamos estos
atributos y tampoco hidden, nos aparecern en la pgina tan slo los
mandos de la consola, sin logotipos aadidos (Internet Explorer) o la
consola recortada (Netscape Navigator).

align="top/bottom/center/baseline/left/right/
texttop/middle/absmiddle/absbotom", anlogo al de la
etiqueta IMG, define la alineacin horizontal o vertical de la consola
respecto de los elementos de la pgina.
hspace="hs", que establece la separacin horizontal, vspace="vs", que
establece la separacin vertical, en pixels, entre la consola y los
elementos de la pgina que la redean. Anloga a sus equivelentes de la
etiqueta IMG.
Estos son los atributos principales, aunque podemos encontrar referencias de
otros admitidos, aunque no suelen ser operativos en la realidad, ya que no suelen
funcionar de forma correcta o son especficos de Nestcape (como toda la serie
de atributos que configuran los controles de la consola.
Ejemplo sin consola:

<embed src="../sonidos/mid.mid" hidden="true" type="audio/midi"
autostart="true"></embed>
Ejemplo con consola:

<embed src="../sonidos/mid.mid" hidden="false" type="audio/midi"
autostart="false" width="150" height="100"></embed>

Manual de HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manual de HTML

Uploaded by

Copyright:

Available Formats

Windows_Movie Maker_HTML

Haga un listado de todas las Versiones del Sistema Operativo Windows.

Prof. Fredy Martinez Eneque 1

ordenador. En resumen, el sistema operativo es un programa que se encarga

de facilitar el uso del ordenador.

En el escritorio tenemos iconos que permiten abrir el programa

Prof. Fredy Martinez Eneque 2

opciones que nos ofrece Windows 7. Si lo seleccionamos se desplegar un men

similar al que te mostramos a continuacin. Se trata del men Inicio. Tambin

podemos acceder a l mediante el teclado pulsando la tecla Windows.

En la parte superior se muestra un pequeo recuadro con la imagen del

Si ingresamos a Todos los programas podemos encontrar carpetas,

Prof. Fredy Martinez Eneque 3

5. _________________________________es el lugar donde se almacenan

COMO CREAR ACCESOS DIRECTOS (ICONOS)

Los iconos son accesos directos, se crean para facilitar el ingreso

Se Puede realizar de varias maneras como veremos a continuacin:

1. Clic en Inicio/Todos los Programas/MicrosoftOffice, Nos colocamos en

Prof. Fredy Martinez Eneque 4

2. Si se trata de un archivo como por ejemplo un archivo de Word ,

Aparece el icono en el escritorio

Prof. Fredy Martinez Eneque 5

2. Mencione los pasos para crear un acceso directo de un archivo Lista de

3. Crear un acceso directo de 2 archivos de archivos de Word en el escritorio

Prof. Fredy Martinez Eneque 6

EL FONDO DE ESCRITORIO O PANTALLA

En la parte inferior de la ventana Personalizacin vemos el botn Fondo de

En la opcin Posicin de la imagen establecemos cmo se mostrar la

Rellenar, Ajustar, Expandir, Mosaico y Centro.

Prof. Fredy Martinez Eneque 7

Seleccionar la imagen o buscar una imagen que tengas en tu computadora y

Nota Obtenida: _________________

CAMBIAR FONDO CON UNA IMAGEN DE INTERNET

Si estamos navegando por internet y nos gusta una imagen tambin

opcin Establecer como fondo. Para escoger las imgenes ms adecuadas

es importante conocer la resolucin y el tamao de nuestra pantalla.

Prof. Fredy Martinez Eneque 8

Tambin desde el men contextual podemos Establecer como fondo de

escritorio una foto que estemos visualizando con el Visualizador de

Prof. Fredy Martinez Eneque 9

Interfaz de Windows Movie Maker

Prof. Fredy Martinez Eneque 10

Insercin de Colecciones (imagen, video y audio).

Prof. Fredy Martinez Eneque 11

Prof. Fredy Martinez Eneque 12

Aplicacin de efectos de transicin

Aplicacin de efectos de video

Prof. Fredy Martinez Eneque 13

Guardar Archivo de Pelcula

Prof. Fredy Martinez Eneque 14

Prof. Fredy Martinez Eneque 15

Prof. Fredy Martinez Eneque 16

HTML son las siglas de HYPERTEXT MARKUP LANGUAGE (Lenguaje de Macado de

ESTRUCTURA BSICA DE HTML

<html> Que significa el Inicio del documento HTML

<head> Que indica el inicio de la cabecera

<title> Que indica el inicio del Titulo

</title> Que indica el fin del Titulo

</head> Que indica el fin de la cabecera

<body> Que indica el inicio del cuerpo

</body> Que indica el fin del cuerpo.

</html> Que indica el fin del documento htm

EDITOR PARA REALIZAR EL CDIGO HTML