Diseñar páginas web en lenguaje HTML (página 2)

     En este caso la etiqueta
HR presenta cuatro atributos. El segundo atributo
NOSHADE es un caso especial que no presenta valor. El
orden en que se especifiquen los atributos no afectará al
resultado final.

ACTIVIDAD 10

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

3 Graba con el mismo nombre y ejecuta.

4 Observa la página que te presenta, si
muestra algún error corrígelo y
vuelve

a ejecutar.

5.- Practica las diferentes etiquetas para
texto.

EJEMPLO 7:

Etiqueta

 Presenta atributos que nos permiten modificar el
tamaño y color del texto incluido entre la etiqueta de
inicio y fin.

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 página que te presenta, si
muestra algún error corrígelo y
vuelve

a ejecutar.

5.- Practica los diferentes atributos de la etiqueta
.

Ejemplo 8:

ACTIVIDAD
12

DESPUÉS DE HABER PRACTICADO
LOS EJERCICIOS ANTERIORES, COMPLETA LA TABLA SIGUIENTE EXPLICANDO
LA FUNCIÓN QUE REALIZA CADA
ETIQUETA:

ACTIVIDAD
INTEGRADORA

PARTE 2

Es tiempo de que empieces a realizar tu
página web, por lo que es importante que revises el
diseño que hiciste y empieces a definir cada una de las
etiquetas que van a formar la página. Anota en el cuadro
siguiente el código de tu página principal para que
posteriormente la trascribas en el bloc de
notas.

Imágenes en los documentos
HTML

Etiqueta

     En un documento HTML
se puede incluir cualquier imagen en alguno de los siguientes
formatos gráficos: GIF, JPEG ó XBM. El
formato más extendido y practico es el GIF, todos
los navegadores gráficos de la Web soportan este formato,
además existen gran cantidad de programas de tratamiento
de gráficos que permiten grabar los gráficos o
convertir gráficos a GIF. Este formato, así mismo,
utiliza algoritmos de compresión que hacen que sus
archivos sean de cortos tamaños y apropiados para su
transmisión por la red.

     El formato GIF es
más recomendado para iconos, gráficas,… y el
formato JPEG es más útil para imágenes
reales como paisajes y personas.

     Para poder utilizar
otro formato gráfico, necesitarás usar un enlace
cuyo destino sea la car[eta del gráfico. Al seguir el
enlace se te pedirá que indiques un programa externo que
se encargue de mostrar los archivos de ese formato
gráfico, por lo tanto no pueden insertarse dentro de
documentos HTML.

Inclusión de
Imágenes      La etiqueta
encargada de mostrar imágenes 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 algún 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 extensión apropiada a su formato, por ejemplo si es
GIF la extensión será .gif, si es
JPEG la extensión 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 imágenes en servidores externos puede ser
más lento. Por tanto conviene copiar las imágenes e
iconos que se usen al servidor local.

     A
continuación 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 imágenes, sean solo texto o tenga
inhabilitado el mostrar imágenes. Se recomienda cuando
existan en el documento imágenes usadas como botones, para
mostrar un texto en vez del botón en navegadores que no
puedan mostrar gráficos, de esta forma se consigue que
todos los usuarios puedan consultar sus
páginas.

Alineación de la
imagen     Indica cómo 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.

     También se
pueden utilizar alineaciones un poco más avanzada,
TEXTTOP se alinea justo al comienzo del texto más
alto de la línea (TOP se alinea al tamaño del
primer carácter de la línea). 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
más precisa la alineación, aunque solo son validos
para los navegadores más avanzados.

 En los casos anteriores solo se
especifica donde se coloca la primera línea del texto y el
resto se incluyen debajo de la imagen quedando un efecto muy feo
cuando el texto tiene más de una línea. Existen
otras alineaciones que incluirán 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 combinación con las anteriores
alineaciones.

Tamaño de la
imagen     Es posible cambiar el
tamaño 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 tamaño del documento. En caso de que la
imagen sea mayor o menor se escalará a este
tamaño.

     El atributo
WIDTH indica el ancho al que se mostrará la imagen,
escalándola a este tamaño. También 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, ajustándose la otra a la proporción de
la imagen. Es recomendable indicar solo uno de estos
parámetros 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 proporción
con respecto al texto. Si se desea mostrar dos imágenes 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 ningún caso el alto
(HEIGHT), de esta forma independientemente como sea el
tamaño de la ventana del navegador e independientemente
del monitor del cliente, siempre se podrán mostrar ambas
imágenes en la misma línea.

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 página que te presenta, si
muestra algún error corrígelo y
vuelve

a ejecutar.

5.- Practica las diferentes ubicaciones de las
imágenes.

Ejemplo 9:

Tablas

En HTML también podemos
incluir arreglos de tablas. Se deben utilizar varias
etiquetas:

Etiqueta

Señala el inicio y final de
una tabla. Sus atributos son:

Etiqueta

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

Etiqueta

Indica al navegador que exhiba el
texto dentro de una fila; puede también interpretarse como
la etiqueta que define filas.

Etiqueta

La etiqueta de datos de la tabla, es
la que identifica a las columnas o celdas específicas de
una tabla. Atributos principales:

Recuerde que dentro de una celda,
usted puede insertar desde texto o un gráfico 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 corrígeles

4 Observa la tabla que te presenta la
página.

5 Modifícala a tu
gusto.

Ejemplo 10:

Listas

Con frecuencia se usan listas en los
documentos. El lenguaje HTML incorpora unas listas con
viñetas sencillas o también letras o
números. Para dar más vistosidad a las
páginas, se suelen emplear también imágenes
que se colocan delante de cada párrafo. Vamos a ver
algunas de las posibilidades que tenemos.

Listas con viñetas
desordenadas

He aquí el ejemplo más
sencillo de una de estas listas:

Otro atributo interesante es
compactar para reducir el espacio entre los
elementos

Listas con viñetas
ordenadas

Estas listas se caracterizan porque
aparecen números 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

Listas de
definición

Estas listas se forman con el
elemento que se define y su definición.

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 corrígeles

4 Observa las listas que te presenta la
página.

5 Modifícala a tu
gusto.

Ejemplo 11:

Hipervínculos

Un vínculo hipertextual es un texto,
botón o imagen que al seleccionar nos lleva a otra
dirección URL, página WEB o
recurso.

Etiqueta

La etiqueta que viene de "ancla",
denota el inicio y el final de una instrucción que
contiene alguna forma de vínculo o hipervínculo.
Esta etiqueta permite al usuario vincularse a otra
ubicación dentro del mismo documento HTML, a otro sitio
WEB, a un servidor FTP, enlace de correo
electrónico.

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 página que te presenta, si
muestra algún error corrígelo y
vuelve

a ejecutar.

5 Practica los
hipervínculos.

6 Modifícala a tu
gusto.

Ejemplo 12:

ACTIVIDAD
17

Después de haber practicado los
ejercicios anteriores llena la siguiente tabla, explicando la
función que realiza cada una de las etiquetas
siguientes:

ACTIVIDAD
INTEGRADORA

PARTE 3

Continuamos con la elaboración de la
codificación de tu página web, básate en los
ejemplos para que puedas realizar las otras páginas que
componen tu página web. Anota en el cuadro siguiente el
código de tu página que vas a diseñar para
que posteriormente la trascribas en el bloc de
notas.

Marquesinas

Vamos a ver ahora lo que son las marquesinas. Son
pequeñas ventanas donde vemos un texto desplazarse.
Sólo son implementadas por Microsoft Internet Explorer
3.0 o superior, y no por Netscape y los demás
navegadores, donde se verá como un texto
fijo.

La etiqueta básica
será

Esta es una marquesina por defecto, pero se pueden
añadir muchos más
parámetros:

Otras etiquetas
útiles

Existen otras etiquetas que pueden ser
útiles al momento de elaborar las páginas HTML. Se
detalla el objetivo de cada una de las etiquetas y un
ejemplo.

ACTIVIDAD
INTEGRADORA

ÚLTIMA
PARTE

En trabajo colaborativo como proyecto final
deberás entregar en un CD lo siguiente:

1.- El Documento en Microsoft Word del
diseño de tu página web que elaboraste en la
parte

1 de la actividad integradora.

2.- El archivo que elaboraste en el bloc de notas
de tu página principal index.html que
incluya:

? Encabezado

? Imágenes

? Hipervínculos a otras páginas
web

? Hipervínculos a tus
páginas.

? Opción para enviar un
correo

3.- El archivo que elaboraste en el bloc de notas
de la segunda página, en la que apliques las
tablas

4.- El archivo que elaboraste en el bloc de notas
de la tercera página, en la que apliques
listas.

5.- Las tres páginas de tus sitios
web.

6.- El Documento en Microsoft Word con las
conclusiones individuales de cada uno de los integrantes del
equipo.

Autor:

Karla