Monografias.com > Sin categoría
Descargar Imprimir Comentar Ver trabajos relacionados

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




Enviado por karla



Partes: 1, 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:

Monografias.com

Etiqueta

Monografias.com

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

ATRIBUTO

FUNCIÓN

Color

Determina el color que se aplica al
texto

Size

Determina el tamaño relativo
del texto. Los tamaños válidos son del 1 al
7, siendo el predeterminado el 3 y el más 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 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:

Monografias.com

ACTIVIDAD
12

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

Monografias.com

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.

Monografias.com

Imágenes en los documentos
HTML

Etiqueta

Monografias.com

     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:

Monografias.com

     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.

Monografias.comMonografias.com

 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.

Monografias.com

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.

Monografias.com

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:

Monografias.com

Monografias.com

Tablas

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

Etiqueta

Monografias.com

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

ETIQUETA

FUNCIÓN

Align

Establece la alineación de la
tabla o texto mediante

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

Monografias.com

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

ETIQUETA

FUNCIÓN

Colspan

especifica el número de celdas
que cubre el encabezado

Align

Determina la posición del
texto del titilo

Etiqueta

Monografias.com

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

ETIQUETA

FUNCIÓN

Align

Alineación del texto/objeto de
la celda

Etiqueta

Monografias.com

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

ETIQUETA

FUNCIÓN

Align

Alineación del texto/objeto de
la celda

Bgcolor

Color de fondo de la celda

Background

imagen de fondo de una
celda

Width

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

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

Monografias.com
Monografias.com

Monografias.com

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:

Monografias.com

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

ESCRIBIMOS EN
HTML

SE VERÁ
ASÍ

  1. Primer término de la lista
  2. Segundo término
  3. Tercer término
  4. Cuarto
  5. Quinto

  • Primer término de la
    lista

  • Segundo término

  • Tercer término

  • Cuarto

  • Quinto

Listas de
definición

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

Monografias.com

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:

Monografias.com

Monografias.com

Monografias.com

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

Monografias.com

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:

Monografias.com

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:

Monografias.comMonografias.com

Monografias.com

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:

Monografias.com

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.

Monografias.com

Monografias.com

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á

Monografias.com

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

Monografias.com

Monografias.com

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.

Monografias.com

Monografias.com

Monografias.com

Monografias.com

Monografias.com

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.

Monografias.com

Monografias.comMonografias.com

 

 

 

Autor:

Karla

 

Partes: 1, 2
 Página anterior Volver al principio del trabajoPágina siguiente 

Nota al lector: es posible que esta página no contenga todos los componentes del trabajo original (pies de página, avanzadas formulas matemáticas, esquemas o tablas complejas, etc.). Recuerde que para ver el trabajo en su versión original completa, puede descargarlo desde el menú superior.

Todos los documentos disponibles en este sitio expresan los puntos de vista de sus respectivos autores y no de Monografias.com. El objetivo de Monografias.com es poner el conocimiento a disposición de toda su comunidad. Queda bajo la responsabilidad de cada lector el eventual uso que se le de a esta información. Asimismo, es obligatoria la cita del autor del contenido y de Monografias.com como fuentes de información.

Categorias
Newsletter