ngresa al bloc de notas y realiza lo siguiente:

1 Abre el archivo que grabaste con el nombre de index.html.

2 Continua trascribiendo la parte que falta del ejercicio 7.
3 Graba con el mismo nombre y ejecuta.
4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve
a ejecutar.
5.- Practica las diferentes etiquetas para texto.
EJEMPLO 7:

Etiqueta
Presenta atributos que nos permiten modificar el tamao y color del texto incluido entre la
etiqueta de inicio y fin.

ATRIBUTO FUNCIN

Color Determina el color que se aplica al texto

Determina el tamao relativo del texto. Los tamaos vlidos son del 1 al 7,
Size
siendo el predeterminado el 3 y el ms grande el 1.

Face Asigna una fuente o tipo de letra.

ACTIVIDAD 11
Ingresa al bloc de notas y realiza lo siguiente:
1 Abre el archivo que grabaste con el nombre de index.html.
2 Continua trascribiendo la parte que falta del ejercicio 8.
3 Graba con el mismo nombre y ejecuta.
4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve
a ejecutar.
5.- Practica los diferentes atributos de la etiqueta .
Ejemplo 8:
 ACTIVIDAD 12
DESPUS DE HABER PRACTICADO LOS EJERCICIOS ANTERIORES,
COMPLETA LA TABLA SIGUIENTE EXPLICANDO LA FUNCIN QUE
REALIZA CADA ETIQUETA:
 ACTIVIDAD INTEGRADORA
PARTE 2
Es tiempo de que empieces a realizar tu pgina web, por lo que es importante
que revises el diseo que hiciste y empieces a definir cada una de las etiquetas
que van a formar la pgina. Anota en el cuadro siguiente el cdigo de tu pgina
principal para que posteriormente la trascribas en el bloc de notas.
Imgenes en los documentos HTML
Etiqueta

En un documento HTML se puede incluir cualquier imagen en alguno de los siguientes

formatos grficos: GIF, JPEG XBM. El formato ms extendido y practico es el GIF,
todos los navegadores grficos de la Web soportan este formato, adems existen gran
cantidad de programas de tratamiento de grficos que permiten grabar los grficos o
convertir grficos a GIF. Este formato, as mismo, utiliza algoritmos de compresin que
hacen que sus archivos sean de cortos tamaos y apropiados para su transmisin por la red.
El formato GIF es ms recomendado para iconos, grficas,... y el formato JPEG es ms
til para imgenes reales como paisajes y personas.
Para poder utilizar otro formato grfico, necesitars usar un enlace cuyo destino sea la
car[eta del grfico. Al seguir el enlace se te pedir que indiques un programa externo que se
encargue de mostrar los archivos de ese formato grfico, por lo tanto no pueden insertarse
dentro de documentos HTML.
Inclusin de Imgenes La etiqueta encargada de mostrar imgenes en HTML
es IMG y tiene el siguiente formato:

En el punto del archivo HTML en el que queramos que se muestre la imagen incluimos
esta etiqueta. Se puede mostrar la imagen, al comienzo del documento, al final o intercalada
en el texto. Igualmente se puede insertar una imagen dentro de cualquiera de
las estructuras del lenguaje HTML como listas, tablas o formularios. Esta etiqueta no
necesita la etiqueta de fin, ya que el efecto de la etiqueta no se produce sobre un texto o
algn elemento HTML.
El atributo SRC indica el archivo de imagen que se incluir en el documento. Se indicar
el camino hasta la imagen en formato URL, el archivo de la imagen deber tener una
extensin apropiada a su formato, por ejemplo si es GIF la extensin ser .gif, si
es JPEG la extensin ser .jpg o .jpeg, si no se cumple esto la imagen no se mostrar de
forma correcta.
Al definir la imagen como una URL, esta imagen no es necesario que se encuentre en
el servidor local, pudiendo especificar el camino completo y el servidor donde se encuentra
la imagen. En este caso al igual que en los hiperenlaces es posible indicar direcciones
de URL relativas a los documentos actuales.
Lo normal es referenciar una imagen que se encuentre en el servidor local, ya que el
acceso a imgenes en servidores externos puede ser ms lento. Por tanto conviene copiar las
imgenes e iconos que se usen al servidor local.
A continuacin se explica la utilidad de cada unos de los atributos de la etiqueta IMG.
Texto alternativo El atributo ALT, indicar un texto alternativo a mostrar si no fue
posible mostrar la imagen. Se usa para navegadores que no permitan mostrar imgenes,
sean solo texto o tenga inhabilitado el mostrar imgenes. Se recomienda cuando existan en
el documento imgenes usadas como botones, para mostrar un texto en vez del botn en
navegadores que no puedan mostrar grficos, de esta forma se consigue que todos los
usuarios puedan consultar sus pginas.
Alineacin de la imagen Indica cmo se alinea el texto que sigue a la imagen con
respecto a esta. Indicar si la primera frase del texto se colocar en la parte alta de la
imagen, TOP, en el punto medio de la imagen, MIDDLE, o en la parte de abajo de la
imagen, BOTTOM.
Tambin se pueden utilizar alineaciones un poco ms avanzada, TEXTTOP se alinea
justo al comienzo del texto ms alto de la lnea (TOP se alinea al tamao del
primer carcter de la lnea). ABSMIDDLE, es el centro real de la imagen, con MIDDLE se
coloca el texto a partir del punto medio, con ABSMIDDLE el texto aparece centrado con la
imagen. ABSBOTTOM coloca el texto justo al final de la imagen. Se recomienda que se
usen estos ltimos al ser ms precisa la alineacin, aunque solo son validos para los
navegadores ms avanzados.
 En los casos anteriores solo se especifica donde se coloca la primera lnea del texto y el
resto se incluyen debajo de la imagen quedando un efecto muy feo cuando el texto tiene
ms de una lnea. Existen otras alineaciones que incluirn a la imagen insertada dentro del
texto. La imagen puede quedar a la izquierda, LEFT o a la derecha, RIGHT. No se podr
utilizar en combinacin con las anteriores alineaciones.
Tamao de la imagen Es posible cambiar el tamao de la imagen de forma que pueda
ajustarse como se desee, pudiendo ampliar o disminuir este.
El atributo HEIGHT Determina el alto de la imagen a mostrar, se especifica en puntos
de la pantalla (pixeles) o en tanto por ciento sobre el tamao del documento. En caso de
que la imagen sea mayor o menor se escalar a este tamao.
El atributo WIDTH indica el ancho al que se mostrar la imagen, escalndola a este
tamao. Tambin se expresar en pixeles o en tanto por ciento.
No es necesario indicar el ancho y el alto, se puede especificar solo uno de las
dimensiones, ajustndose la otra a la proporcin de la imagen. Es recomendable indicar
solo uno de estos parmetros para que la imagen no se muestre deformada. Igualmente se
debe usar el valor relativo en tanto por ciento si se desea que la imagen guarde siempre una
misma proporcin con respecto al texto. Si se desea mostrar dos imgenes y queremos que
una ocupe un cuarto de la pantalla y la otra el espacio restante, se indica en una el ancho
(WIDTH) del 25% y en la otra del 74%, no indicando en ningn caso el alto (HEIGHT), de
esta forma independientemente como sea el tamao de la ventana del navegador e
independientemente del monitor del cliente, siempre se podrn mostrar ambas imgenes
en la misma lnea.
 ACTIVIDAD 13
Ingresa al bloc de notas y realiza lo siguiente:
1 Abre el archivo que grabaste con el nombre de index.html.
2 Continua trascribiendo la parte que falta del ejercicio 9.
3 Graba con el mismo nombre y ejecuta.
4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve
a ejecutar.
5.- Practica las diferentes ubicaciones de las imgenes.
Ejemplo 9:
Tablas
En HTML tambin podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:
Etiqueta

Seala el inicio y final de una tabla. Sus atributos son:

ETIQUETA FUNCIN

Establece la alineacin de la tabla o texto mediante

Align
ALIGN=LEFT o ALIGN=RIGHT

Bgcolor Establece el color de fondo de las celdas de la tabla

Border Determina el ancho del borde en pixeles

BorderColor Asigna un color al borde

BorderDark Determina el color de la parte oscura de un borde de 3 dimensiones

BorderLight Asigna el color de la parte clara de un borde de 3 dimensiones

Caption Especifica el titulo para la tabla

Cellpadding Establece la cantidad de espacio libre junto al contenido de una celda

Cellspacing Asigna la cantidad de espacio entre las celdas de una tabla

Width Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta

Indica al navegador cliente que exhiba el texto como un encabezado en la primera fila de
una tabla. Atributos principales:

ETIQUETA FUNCIN

Colspan especifica el nmero de celdas que cubre el encabezado

Align Determina la posicin del texto del titilo

Etiqueta

Indica al navegador que exhiba el texto dentro de una fila; puede tambin interpretarse
como la etiqueta que define filas.
 ETIQUETA FUNCIN

Align Alineacin del texto/objeto de la celda

Etiqueta

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas especficas de

una tabla. Atributos principales:

ETIQUETA FUNCIN

Align Alineacin del texto/objeto de la celda

Bgcolor Color de fondo de la celda

Background imagen de fondo de una celda

Ancho de la celda/columna con respecto al ancho de la tabla

Width
Solo precisa definir el ancho en la primera celda de la columna.

Recuerde que dentro de una celda, usted puede insertar desde texto o un grfico hasta una
tabla entera.
ACTIVIDAD 14
Ingresa al bloc de notas y realiza lo siguiente:
1 Trascribe el ejercicio 10.
2 Graba con el nombre de Planteles. html
3 Ejecuta el archivo, s presenta errores corrgeles
4 Observa la tabla que te presenta la pgina.
5 Modifcala a tu gusto.
Ejemplo 10:
Listas
Con frecuencia se usan listas en los documentos. El lenguaje HTML incorpora unas listas
con vietas sencillas o tambin letras o nmeros. Para dar ms vistosidad a las pginas, se
suelen emplear tambin imgenes que se colocan delante de cada prrafo. Vamos a ver
algunas de las posibilidades que tenemos.
Listas con vietas desordenadas
He aqu el ejemplo ms sencillo de una de estas listas:
Otro atributo interesante es compactar para reducir el espacio entre los elementos
Listas con vietas ordenadas
Estas listas se caracterizan porque aparecen nmeros o ciertos caracteres que ordenan sus
elementos. La etiqueta usada es
junto con su correspondiente de cierre . El atributo TYPE toma ahora los valores 1, a, A, i, I.
Un ejemplo de estas listas es el siguiente

ESCRIBIMOS EN HTML SE VER AS

Primer trmino de la lista

i. Primer trmino de la lista
ii. Segundo trmino Segundo trmino
iii. Tercer trmino
Tercer trmino
iv. Cuarto
v. Quinto Cuarto

Quinto

Listas de definicin
Estas listas se forman con el elemento que se define y su definicin.
 ACTIVIDAD 15
Ingresa al bloc de notas y realiza lo siguiente:
1 Trascribe el ejercicio 11.
2 Graba con el nombre de capacitaciones. html
3 Ejecuta el archivo, s presenta errores corrgeles
4 Observa las listas que te presenta la pgina.
5 Modifcala a tu gusto.
Ejemplo 11:
Hipervnculos
Un vnculo hipertextual es un texto, botn o imagen que al seleccionar nos lleva a
otra direccin URL, pgina WEB o recurso.
Etiqueta

La etiqueta que viene de "ancla", denota el inicio y el final de una instruccin que contiene
alguna forma de vnculo o hipervnculo. Esta etiqueta permite al usuario vincularse a otra
ubicacin dentro del mismo documento HTML, a otro sitio WEB, a un servidor FTP, enlace
de correo electrnico.
Atributos:

ACTIVIDAD 16
Ingresa al bloc de notas y realiza lo siguiente:
1 Abre el archivo que grabaste con el nombre de index.html.
2 Continua transcribiendo la parte que falta del ejercicio 12.
3 Graba con el mismo nombre y ejecuta.
4 Observa la pgina que te presenta, si muestra algn error corrgelo y vuelve
a ejecutar.
5 Practica los hipervnculos.
6 Modifcala a tu gusto.
Ejemplo 12:
 ACTIVIDAD 17
Despus de haber practicado los ejercicios anteriores llena la siguiente tabla,
explicando la funcin que realiza cada una de las etiquetas siguientes:
 ACTIVIDAD INTEGRADORA
PARTE 3
Continuamos con la elaboracin de la codificacin de tu pgina web, bsate en
los ejemplos para que puedas realizar las otras pginas que componen tu
pgina web. Anota en el cuadro siguiente el cdigo de tu pgina que vas a
disear para que posteriormente la trascribas en el bloc de notas.
Marquesinas
Vamos a ver ahora lo que son las marquesinas. Son pequeas ventanas donde vemos un
texto desplazarse. Slo son implementadas por Microsoft Internet Explorer 3.0 o
superior, y no por Netscape y los dems navegadores, donde se ver como un texto fijo.
La etiqueta bsica ser

Esta es una marquesina por defecto, pero se pueden aadir muchos ms parmetros:
Otras etiquetas tiles
Existen otras etiquetas que pueden ser tiles al momento de elaborar las pginas HTML. Se
detalla el objetivo de cada una de las etiquetas y un ejemplo.
 ACTIVIDAD INTEGRADORA
LTIMA PARTE
En trabajo colaborativo como proyecto final debers entregar en un CD lo siguiente:
1.- El Documento en Microsoft Word del diseo de tu pgina web que elaboraste en la parte
1 de la actividad integradora.
2.- El archivo que elaboraste en el bloc de notas de tu pgina principal index.html que
incluya:
? Encabezado
? Imgenes
? Hipervnculos a otras pginas web
? Hipervnculos a tus pginas.
? Opcin para enviar un correo
3.- El archivo que elaboraste en el bloc de notas de la segunda pgina, en la que apliques las
tablas
4.- El archivo que elaboraste en el bloc de notas de la tercera pgina, en la que apliques
listas.
5.- Las tres pginas de tus sitios web.
6.- El Documento en Microsoft Word con las conclusiones individuales de cada uno de los
integrantes del equipo.
Autor:
Karla

Partes: 1, 2
 Pgina anterior Volver al principio del trabajo Pgina siguiente

Comentarios
Para dejar un comentario, regstrese gratis o si ya est registrado, inicie sesin.

Trabajos relacionados
Anlisis a las causas y consecuencias de los
ataques de hackers en los computadores del
IUTA
Investigar un tema como el que se presenta pudiera
parecer ante los ojos de los "expertos en informtica"
una tarea muy ...
Inteligencia artificial
La inteligencia: Diferentes teoras y definiciones.
Inteligencias mltiples. Futuro de la IA. El termino
"inteligencia a...
Sistemas distribuidos
Definicin. Caractersticas. Evolucin. Cliente-
Servidor. Protocolo. Middleware. Objetos
distribuidos. Base de datos ist...
Ver mas trabajos de Computacion