guÍa de aprendizaje 01 1) datos informativos ......este nuevo estándar incluía las mejoras...

DISEÑO WEB Ing. Fredy Luis Cutipa Nina

pág. 1

GUÍA DE APRENDIZAJE 01 1) DATOS INFORMATIVOS

1. Carrera Profesional : Computación e Informática 2. Unidad Didáctica : Diseño Web 3. Semestre : 2017 - I 4. Semestre Académico : Quinto. 5. Docente : Ing. Fredy Luis Cutipa Nina

2) CONTENIDO

HTML

Qué es HTML

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento.

Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia.

Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web).

Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

Versiones de HTML

En noviembre de 1995 se aprobó el estándar HTML 2.0. para la creación de páginas web. Se creó con objetivos divulgativos, orientado a la actividad académica, en el que el contenido de las páginas era más importante que el diseño.

Pero esta versión del HTML carecía de muchas herramientas que permitieran controlar el diseño de las páginas y añadir contenido multimedia, por lo que Netscape (cuyos navegadores eran los más utilizados por aquellos años) comenzó a incluir nuevas etiquetas que no existían en el estándar.

El comité encargado de establecer los estándares dentro de Internet, comenzó a trabajar en el borrador de una nueva versión de HTML, el borrador de HTML 3.0.

Pero este borrador resultó demasiado extenso, al intentar incluir numerosos nuevos atributos para etiquetas ya existentes, y la creación de otras muchas etiquetas nuevas. Por ello, no fue


pág. 2

bien aceptado por el mercado y varias compañías se unieron para formar un nuevo comité encargado de establecer los estándares del HTML. Este comité pasó a llamarse W3C.

En enero de 1997 se aprobó el estándar HTML 3.2. Este nuevo estándar incluía las mejoras proporcionadas por los navegadores Internet Explorer y Netscape Navigator, que ya habían realizado estensiones sobre el estándar HTML 2.0.

En diciembre de 1997 se aprobó el estándar HTML 4.0, creado para estandarizar los marcos (frames), las hojas de estilo y los scripts.

En septiembre de 2001 se aprobó el estándar HTML 4.01.

<HTML> <HEAD> <TITLE>primera página</TITLE> </HEAD> <BODY> ... ... ... </BODY> </HTML>

En la primer linea encontramos el comando <HTML>. Esto le indica al cliente (ej: Mozilla) que comienza un documento HTML. Luego viene <HEAD>, la primer parte de un documento HTML. Dentro de HEAD puede ir el titulo <TITLE> del documento (Netscape lo muestra en la barra superior de la ventana) y otros comandos mas avanzados que luego veremos. Luego de HEAD viene <BODY>, que es donde se coloca la información que queremos mostrar. El comando BODY acepta varios parámetros muy interesantes:

Tip: un documento HTML consta de dos partes: HEAD y BODY. Siempre deben estar presentes.

Parámetros de BODY

BACKGROUND="imagen.gif" Permite incluir una imágen de fondo. No poner una imágen muy 'pesada' de fondo, no mas de 15k. No olvidar verificar que no dificulte la lectura del texto.

BGCOLOR="#xxxxxx" Cambia el color de fondo de una página. Donde va cada x va un número hexadecimal, del 0 a la F. Las dos primeras xx corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Ej: para un fondo blanco poner todos los valores al máximo: FFFFFF. Para un fondo rojo: FF0000.


pág. 3

TEXT="#xxxxxx" Cambia el color del texto de toda una página. La selección de color funciona igual para todos los casos.

LINK="#xxxxxx" Cambia el color de todas las conexiones (links) de toda una página.

VLINK="#xxxxxx" Cambia el color de todas las conexiones visitadas (links) de toda una página.

Tip: Para ver un ejemplo de como se usa esto pueden fijarse en el código de esta misma página.

En la última línea del código del ejemplo esta </HTML>. Esto le indica al cliente ( Mozilla) que terminó el documento. Noten que: <HEAD> tiene su correspondiente llave de cierre </HEAD>, y <BODY> tiene </BODY>. Esto es fundamental incluirlo en la página para tener un documento HTML correcto. Esta estructura de cabezal (HEAD) y cuerpo (BODY) siempre debe ser mantenida. Envolviendo estas dos secciones va el <HTML> y </HTML>.

Incluyendo texto

Si cargamos el código del primer ejemplo veremos que no aparece nada. (solo el titulo!) Tenemos la estructura, ahora hace falta agregarle la información. Lo primero que debemos tener claro es que al cliente web (Mozilla) no le importa los espacios, tabs, o fin de líneas que tenga un texto creado con el edit. Como ejemplo, veamos la siguiente página:

<HTML> <HEAD> <TITLE>primera página</TITLE> </HEAD> <BODY> <H1>Bienvenido a mi página</H1> Esta página se encuentra en <STRONG>Montevideo Uruguay</STRONG>,<BR> en el <EM>servidor web</EM> de Compuservice. <HR> Hasta luego! </BODY> </HTML>

Aquí aparecen varios comandos nuevos. <H1> es para indicar el que texto es un título. Cuando esta página es cargada ese texto aparece en un tipo de letra más grande. <H1> es un comando 'contenedor', significa que necesita una llave de cierre que es </H1>. Esta llave indica que hasta ahí llega el título, sino toda la página aparecería con letras gigantes. <STRONG> le indica al cliente que muestre 'Montevideo, Uruguay' más fuerte. <EM>


pág. 4

indica que le de énfasis. Generalmente todos los clientes muestran al texto <STRONG> como bold, y <EM> como italic.

<BR> no es un comando contenedor. Cuando colocamos un <BR>, indica un corte de línea (CR). <HR> tampoco es contenedor, indica incluir un separador.

Comandos básicos de formateo de texto

<H1> </H1> Indica que el texto en un título. El más importante (grande) es H1, luego H2 y asi hasta H7. Los más usados son hasta H3.

<STRONG> </STRONG>

Muestra en texto seleccionado más fuerte. Casi todos lo muestran como bold.

<EM> </EM> Muestra en texto seleccionado con énfasis. Casi todos lo muestran como italic.

<BR> Indica un corte de línea. (CR)

<HR> Inserta un separador.

<P> </P> Indica un comienzo de párrafo. Tiene como opciones ALIGN (center, left y right) y otras más que luego veremos. Útil para centrar o alinear a la derecha texto. Cada comienzo de párrafo deja un espacio separador.

Tip: para centrar un texto: <P ALIGN=CENTER>.

Caracteres especiales y espacios en blanco Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:

< Se representa con <

> Se representa con >

Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la ñ y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habría que escribir el nombre que los representa.

A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:


pág. 5

Carácter Representación < < > > á á Á Á é é É É í í Í Í ó ó Ó Ó ú ú Ú Ú ñ ñ Ñ Ñ ™

Carácter Representación € € ç ç Ç Ç ü ü Ü Ü & & ¿ ¿ ¡ ¡ " " · · º º ª ª ¬ ¬ © © ® ®

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por .

Por ejemplo, para insertar el texto:

¡Bienvenidos, esta es mi 1ª página!

Habría que escribir:


Comentarios

pág. 6

En ocasiones podemos desear añadir comentarios aclaratorios dentro del código, de manera que no sean visualizados en el navegador, pero sí a la hora de editar el documento.

Para insertar comentarios dentro del código, basta con insertar el texto entre .

Todo el código que se inserte entre estos símbolos no será visualizado en los navegadores.

Por ejemplo, para insertar el texto siguiente con un comentario:



 ¡Bienvenidos, esta es mi 1ª página!

Saltos de línea <br> En general, cuando trabajamos con un editor de texto se produce un salto de línea al pulsar la tecla INTRO.

Si pulsamos INTRO en un documento HTML, el salto de línea se producirá en el código, pero no se mostrará en el navegador. Para que se produzca el salto de línea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta <br> donde se desee que se produzca el salto.

La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> después de ella, ya que dicha etiqueta no existe.

Por ejemplo, para insertar el texto:

Queridos usuarios, tengo el placer de comunicaros que hay una nueva sección.


Queridos usuarios,<br>tengo el placer de comunicaros que hay una nueva secci&oacuten.

Incluyendo imágenes Incluir imágenes en una página web es muy sencillo. Primero ciertas consideraciones:


pág. 7

JPG vs GIF

Solo usar JPG cuando la imagen sea una foto. Cuando sea un logo, letras, o un dibujo utilizar GIF. Existen excepciones, pero esta es una buena regla general. Lo principal es que la imagen ocupe lo mínimo posible y que tenga una calidad aceptable. Todo vale, un GIF de 256 colores generalmente en un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar a menos de la mitad. No olvidar que a nadie (va, a muy pocos) le sobra ancho de banda, y menos en nuestro país. Como regla, si una sola imagen pesa más de 50k hay que hacerla adelgazar! Muy grande para internet. Si quieren poner una imagen grande (hay casos que no hay otra), no obligar a la gente a bajarla poniéndola directamente en la página, primero pongan un versión mini de digamos 150 x 100 pixeles con una conexión a la grande, y avisando cuanto ocupa la grande antes de obligar a bajarla.

Tip: el código para alinear la moto de arriba es: <IMG SRC="imagenes/moto.jpg" ALIGN=RIGHT>

IMG SRC

Para incluir una imagen se utiliza el comando <IMG>. IMG acepta una gran variedad de parámetros y es muy flexible. Veamos algunos:

Parámetros de IMG

SRC Indica el nombre de archivo de la imagen a incluir.

HEIGHT Indica la altura de la imagen. El Netscape, si la altura no coincide con la original de la imagen, esta es estirada o achicada para llegar a la altura especificada en este parámetro.

WIDTH Indica el ancho de la imagen.

BORDER Si la imagen tiene una conexión, especificando BORDER=0 desaparece el borde característico de una imagen con conexión. Si no deseamos que se vea el borde, este es el comando a utilizar.

ALIGN Permite alinear una imagen. Acepta LEFT, RIGHT, BOTTOM, TOP, MIDDLE, etc.

LOWSRC Indica el nombre de archivo de la versión de carga rápida de una imagen. Muy útil para agilizar el despliegue de una página pesada.

Tip: Siempre escribir el nombre del archivo entre comillas.

Generando conexiones (links)


pág. 8

Las conexiones (en ingles links) son un elemento fundamental del HTML. Supongamos que tenemos una lista de servicios. Lo ideal es que cuando seleccionamos un servicio, saltemos a una página con mas detalles sobre ese servicio. Eso es el hypertexto. En teoría las conexiones podrían ser infinitas, navegando entre diferentes temas con solo seleccionarlos. Imaginen una hyperenciclopedia, donde cada tema puede ir profundizándose y ramificándose hacia todas las áreas del conocimiento. En la realidad es bastante complicado lograrlo.

En un documento HTML, se especifica una conexión mediante el comando <A> (Anchor). Por ejemplo, para realizar una conexión sería: <A HREF="index.html"> </A>. Para verlo mas claro, veamos como agregarle una conexión a nuestra 'primer página'.

<HTML> <HEAD> <TITLE>primera página</TITLE> </HEAD> <BODY> <H1>Bienvenido a mi página</H1> Esta página se encuentra en <STRONG>Montevideo</STRONG>,<BR> en el <EM>servidor</EM> de <A HREF="http://w3.cs.com.uy">Compuservice.</A> <HR> Hasta luego! </BODY> </HTML>

Este código de ve asi:

Bienvenido a mi página Esta página se encuentra en Montevideo Uruguay, en el servidor web de Compuservice.

Hasta luego!

En este caso, la dirección completa es especificada. Al seleccionar Compuservice saltamos a la página principal de Compuservice. Cuando hacemos referencia a una página dentro del mismo directorio donde esta nuestra primera página solo alcanza con incluir su nombre. Por ejemplo, si estamos en index.html y queremos hacer una conexión a servicios.html que está en el mismo directorio, solo alcanza con <A HREF="servicios.html">texto</A>.

Listas en HTML

http://w3.cs.com.uy/


pág. 9

Las listas son simplemente eso: listas. Exactamente igual que cuando hacemos una lista de compras para el supermercado. Las listas son muy simples. Hay diferentes tipos: listas desordenadas, ordenadas y de definiciones. Comencemos por las más simples, las desordenadas.

Listas desordenadas

<UL TYPE="disc"> <LI>papas <LI>mantequilla <LI>dulce de leche <LI>pan </UL>

asi se ve --->>>

• papas • mantequilla • dulce de leche • pan

Como ven, confeccionar una lista es muy simple. Primero especificamos el tipo de lista, en este caso UL (unordered list) de lista desordenada. Luego cada item de la lista se indica con LI (list item). Fácil verdad? Verán tembién que hay un parámetro en UL, el TYPE="disc". Eso significa que el puntito que aparece a la izquierda de cada item de la lista sea un disco. También existen CIRCLE y SQUARE.

<UL TYPE="square"> <LI>papas <LI>salus <LI>dulce de leche <LI TYPE=DISC>pan </UL>

asi se ve --->>>

papas salus dulce de leche pan

Tip: se pueden combinar tipos de items como en el ejemplo anterior. Útil para diferenciar items.

<UL TYPE="circle"> <LI>papas <LI>salus <LI>dulce de leche <LI>pan </UL>

asi se ve --->>>

o papas o salus o dulce de leche o pan

No todos los browsers soportan esto. Es un pequeño detalle pero no está de más saberlo. Ahora pasemos a las listas ordenadas. Se definen exactamente igual a las desordenadas, salvo que se utiliza el comando OL (ordered list). Veamos un ejemplo:

Listas ordenadas

<OL> <LI>papas <LI>salus <LI>dulce de leche <LI>pan </OL>

asi se ve --->>>

1. papas 2. salus 3. dulce de leche 4. pan

En las listas ordenadas el puntito pasa a ser un numeral que indica el orden de cada item. Muy util para numerar listas automaticamente, ya que no hay que ingresar en número de cada item a


pág. 10

mano. Al igual que en las listas desordenadas, se puede elegir mediante el parámetro TYPE el tipo. Existen A, a, I, i, y por defecto 1. Veamos como quedan:

<OL TYPE=A> <LI>papas <LI>salus <LI>dulce de leche <LI>pan </OL>

asi se ve --->>>

A. papas B. salus C. dulce de leche D. pan

<OL TYPE=a> <LI>papas <LI>salus <LI>dulce de leche <LI>pan </OL>

asi se ve --->>>

a. papas b. salus c. dulce de leche d. pan

<OL TYPE=I> <LI>papas <LI>salus <LI>dulce de leche <LI>pan </OL>

asi se ve --->>>

I. papas II. salus

III. dulce de leche IV. pan

<OL TYPE=i> <LI>papas <LI>salus <LI>dulce de leche <LI>pan </OL>

asi se ve --->>>

i. papas ii. salus

iii. dulce de leche iv. pan

Bueno, hasta aqui las listas. Ah, casi me olvidaba, se pueden incluir listas dentro de listas. Como? Muy fácil:

<OL TYPE=i> <LI>papas <LI>salus <LI>dulce de leche <OL> <LI>conaprole <LI>milky <LI>lapataia </OL> <LI>pan </OL>

asi se ve --->>>

i. papas ii. salus

iii. dulce de leche 1. conaprole 2. milky 3. lapataia

iv. pan

LISTAS ANIDADAS


pág. 11

<OL> <LI><B>Módulo 1: HTML 4.0</B> <OL> <LI><I>Presentación del web y del lenguaje HTML</I> <UL> <LI>El web <LI>El HTML </UL> <LI><I>Estructura y jerarquía de un documento</I> </OL> <LI><B>Módulo 2: Hojas de estilo</B> <LI><B>Módulo 3: JavaScript y DHTML</B>

</OL> Visualización de listas Los navegadores tienen unas opciones por defecto a la hora de representar los ítems que preceden a las listas ordenadas y no ordenadas; sin embargo el autor de documentos HTML puede indicar sus preferencias mediante una de las etiquetas <UL> y <OL> denominado TYPE. Dicho atributo puede tomar los siguientes valores para listas no ordenadas: DISC, CIRCLE y SQUARE; y para las listas ordenadas: 1, a, A, i e I. Distintos tipos de visualización de listas <B>no ordenadas</B>

LISTAS DESCRIPTIVAS


pág. 12

<DL> <DT><B>CARÓN</B> o <B>CARONTE,</B> <DD>personaje de la mitología griega, etrusca y romana que ayudaba a los muertos a cruzar los ríos infernales a cambio de un óbolo. De ahí la costumbre, extendida entre griegos y romanos, de colocar una moneda en la boca de los difuntos. <DT><B>CARONA,</B> <DD>n.f. Manta, tela o almohadilla que se pone entre la silla o albarda y el sudadero para que no se lastimen las caballerías. <DT><B>CARONÍ,</B> <DD>r. de Venezuela (Bolívar), el mayor afluente del Orinoco; 925 km. Destaca por las diferencias de amplitud y por los saltos (Saltos del Caroní, de 2.750 m de long.). Su gran potencia hidráulica es aprovechada en parte por las centrales de Macagua y Guri. </DL>

Tablas en HTML

Las tablas son uno de los elementos mas versátiles del HTML. Sirven para todo. No siempre existieron las tablas. Cuando solo existía el HTML V1.0 no había tablas, recién con la versión 2.0 llegaron las tablas.

Vamos a la práctica. Una tabla se define con el comando <TABLE> y debe finalizar siempre con </TABLE>. Cerrar una tabla es muy importante, sino la página puede aparecer totalmente diferente si nos olvidamos de un simple </TABLE>. Imaginen una hoja cuadriculada. Una tabla es eso, con sus filas (TR) y columnas (TD). Primero veamos una tabla simple:

<TABLE> <TR> <TH>1996 <TH>1997 <TR> <TD>30 millones <TD>80 millones </TABLE>

asi se ve --->>> 1996 1997

30 millones 80 millones

Esa tabla esta compuesta de la siguiente forma: Primero comienza la tabla con <TABLE>. Luego viene <TR>, indica que comienza una nueva fila (horizontal) de la tabla. Una tabla por lo menos debe tener una fila. Luego viene <TH>, que indica que comienza una columna. A continuación de este tag se coloca la información. Ven que en la segunda fila usa <TD> en vez de <TH>. TH significa TABLE HEADING, se usa cuando la información contenida es el nombre de una categoría. Simplemente lo que hace es resaltar la información. TD significa TABLE DATA y no resalta la información. TD y TH aceptan los siguiente parámetros:

HEIGHT Indica la altura de la celda. Para especificar el tamaño en pixeles solo ingresar la cantidad, ej: HEIGHT=340 ; también se puede ingresar el tamaño en porcentajes, ej: HEIGHT=30%

WIDTH Indica el ancho de la celda. ALIGN Permite alinear el texto dentro de una celda. Acepta LEFT, RIGHT,

CENTER. VALIGN Permite alinear el texto verticalmente dentro de una celda. Acepta

TOP, BOTTOM, CENTER.


pág. 13

BGCOLOR Permite especificar el color de fondo de una celda.

ROWSPAN=n Indica que esa celda se extiende n filas. COLSPAN=n Indica que esa celda se extiende n columnas.

Que mejor que un ejemplo para ver como se utilizan estos comandos:

Ejemplo 1 - Tabla Normal

<TABLE BORDER=1 WIDTH=400 HEIGHT=100> <R> <TH COLSPAN=3>USUARIOS EN INTERNET EN URUGUAY <TR> <TH>1995 <TH>1996 <TH>1997 <TR> <TD BGCOLOR="#553366" ALIGN=CENTER>1.500 <TD BGCOLOR="#226666" ALIGN=CENTER>15.000 <TD BGCOLOR="#553322" ALIGN=CENTER>80.000 </TABLE> asi se ve

USUARIOS EN INTERNET EN URUGUAY 1995 1996 1997 1.500 15.000 80.000

Ejemplo 2 - Tabla Loca

<TABLE BORDER=1 WIDTH=400 HEIGHT=200> <TR> <TD ROWSPAN=2><FONT SIZE=+1><EM>Texto por aqui...</EM></FONT> <TD VALIGN=BOTTOM><FONT SIZE=-1>mas...</FONT> <TD><FONT SIZE=+1 COLOR="#FF0000">otro por aca...</FONT> <TR> <TD BGCOLOR="#553322">y mas.. <TD ROWSPAN=2 ALIGN=CENTER><FONT SIZE=+1>y por aca...</FONT> <TR> <TD VALIGN=BOTTOM><FONT SIZE=+3>1A</FONT> <TD VALIGN=BOTTOM><FONT SIZE=+3>2B</FONT> </TABLE> asi se ve

Texto por aqui... mas... otro por aca... y mas..

y por aca... 1ª 2B


pág. 14

La etiqueta <TABLE> permite la apertura de una tabla; el fin de tabla se especifica con </TABLE>. Una tabla tiene los siguientes atributos: BORDER, CELLPADDING y CELLSPACING; el valor de estos tributos se suele especificar en pixels. Un par de atributos suplementarios permiten forzar3 la tabla a ocupar un

cierto porcentaje de la anchura (o altura) de la ventana del navegador o un número de pixels dado; se trata de los atributos WIDTH y HEIGHT. <TABLE> admite, además, los atributos VALIGN para alineación vertical del contenido de la celda y ALIGN para la alineación horizontal. El primero de ellos admite los siguientes valores: TOP (superior), BOTTOM (inferior) y MIDDLE (centrado vertical). El segundo admite: RIGHT (derecha), LEFT (izquierda) y CENTER (centrado horizontal). La etiqueta <TR> inicia una línea de la tabla que terminará con la etiqueta de cierre </TR>, mientras que la etiqueta <TD> con la correspondiente etiqueta de cierre </TD> define una celda. Ambas etiquetas también admiten los atributos VALIGN y ALIGN.

Ejemplo:

<HTML> <HEAD><TITLE>Apuntes HTML</TITLE></HEAD> <BODY BGCOLOR="2F4F4F" TEXT="FFFFFF"> <H1><CENTER>PRIMERA SEMANA</CENTER></H1> <CENTER> <TABLE BORDER=3 CELLSPACING=2 CELLPADDING=1 WIDTH="50%"></CENTER> <CAPTION>Turnos de Servicio</CAPTION> <TR> <TH BGCOLOR="FFFFFF"> <IMG SRC="/Hgraficos/Bugs.Jpg" WIDTH="65" HEIGHT="35"></TH> <TH>MONTSE</TH> <TH>MARCOS</TH> <TH>JORGE</TH> </TR> <TR> <TD ALIGN CENTER BGCOLOR="9F5F5F">LUNES</TD> <TD ROWSPAN=2 BGCOLOR="FFAACC">SI</TD> <TD BGCOLOR="9F5F9F">NO</TD> <TD ROWSPAN=2 BGCOLOR="9F5F9F"> NO</TD> </TR> <TR> <TD ALIGN CENTER BGCOLOR="9F5F5F">MARTES</TD> <TD BGCOLOR="FFAACC">SI</TD> </TR> <TR> <TD ALIGN CENTER BGCOLOR="9F5F5F">MIÉRCOLES</TD> <TD ROWSPAN=2 BGCOLOR="9F5F9F">NO</TD> <TD BGCOLOR="9F5F9F">NO</TD> <TD ROWSPAN=2 BGCOLOR="FFAACC"> SI</TD> </TR> <TR> <TD ALIGN CENTER BGCOLOR="9F5F5F">JUEVES</TD> <TD BGCOLOR="FFAACC">SI</TD> </TR> </TABLE> </BODY> </HTML>


pág. 15

EJERCICIO

Crear la siguiente tabla

Gráficos.

Uno de los mayores atractivos que presentan los documentos en formato HTML, es que permiten la inclusión de gráficos; su visualización depende del navegador que se utilice. Evidentemente, las últimas versiones de los navegadores, permiten la visualización de gráficos.

El gráfico no se incluye directamente en el documento HTML, sencillamente existe una etiqueta que referencia el archivo en el cual se encuentra el gráfico.

La etiqueta para gráficos es la siguiente:

<IMG SRC=”Ubicación del archivo”>

Por ejemplo, para cargar un archivo gráfico, “gr1.gif”, que se encuentre en la carpeta “hgraficos”,

<IMG SRC=”hgraficos/gr1.gif”>Texto que acompaña al gráfico Argumentos de la etiqueta <IMG...>

WIDTH: anchura del gráfico en píxels. HEIGHT: longitud del gráfico en píxels. LowSRC: carga el gráfico con baja resolución, mientras se carga el texto; una vez cargado el documento, presenta el gráfico con alta resolución. ALIGN: sirve para alinear el texto que acompaña al gráfico, y puede presentar los siguientes valores:

TOP: superior. TEXTTOP: superior del texto.

MIDDLE: en la mitad. ABSMIDDLE: en la mitad absoluta.

BOTTOM: inferior. ABSBOTTOM: inferior absoluto.

BASELINE: línea base.

ABS...: significa que tendrá en cuenta las partes inferiores de algunos caracteres (p, j...)


pág. 16

En caso de no especificar ningún valor, el texto será alineado en la parte inferior de la imagen. HSPACE: nn: colocar espacio en blanco en la parte inferior y superior del gráfico. VSPACE=nn: colocar espacio en blanco en la parte izquierda y/o derecha del gráfico. BORDER=nn: poner margen a la imagen. ALT=”Texto a mostrar”: Sirve para mostrar texto alternativo al gráfico, en navegadores que no permiten gráficos, o bien en navegadores en los cuales el usuario ha desactivado esta opción. También se muestra el texto cuando el puntero del ratón se sitúa encima del gráfico, y se mantiene allí unos instantes.

Ejemplos:

Para mostrar la imagen “im.gif” con las medidas 100x100 píxels, y rodeada de un margen de 2 píxels, con el texto a mostrar “Hola”, lo haremos del siguiente modo:

<IMG SRC=”imagenes/im.gif” BORDER=2 HEIGHT=100 WIIDTH=100 ALT=”Hola ”>

Para mostrar la imagen “im.gif” con el texto “Hola cómo estáis” alineado en la parte central, dejando 10 píxels en la derecha y en la izquierda, y 20 arriba y abajo, lo pondremos del siguiente modo:

<IMG SRC=”/imatgenes/im.gif” ALIGN=middle HSPACE=20 VSPACE=10> Hola cómo estáis.

Ajustar Texto y Gráficos.

Para ajustar el texto que acompaña un gráfico, se puede utilizar la etiqueta: <IMG...ALIGN=...>

El texto se ajusta alrededor del gráfico de forma automática; para que no quede demasiado junto, se pueden utilizar los argumentos HSPACE iVSPACE.

Para que a partir de algún punto del texto, éste no salga, y salte a la línea inmediata, después del texto, se puede utilizar la siguiente etiqueta:

<BR clear=left (right, all)>

Left: inicia la siguiente línea encima del margen derecho. Right: inicia la siguiente línea encima del margen izquierdo. All: inicia la siguiente línea encima del margen derecho e izquierdo. Ejemplo:

<HTML>

<HEAD>

<TITLE>Apuntes HTML</TITLE>

</HEAD>

<BODY BGCOLOR="005050" TEXT="FFFFFF">

<H1><CENTER>GRÁFICOS</CENTER></H1>

<IMG SRC="Hgraficos/Coche.Jpg" WIDTH="75" HEIGHT="75"

ALIGN=RIGHT HSPACE030>


pág. 17

Los gráficos inseridos deben llevar la extensión.GIF o .JPG.

Las etiquetas WIDTH y HEIGHT permiten seleccionar el tamaño del gráfico.

Para dejar espacio horizontal o vertical entre el gráfico y el texto, se debe especificar en las etiquetas siguientes VSPACE y HSPACE.<P>

Ejemplo:<P>

En la parte superior. <IMG ALIGN=TOP SRC="/Hgraficos/Coche.Jpg" WIDTH="50" HEIGHT="50"><P>

<IMG ALIGN=MIDDLE SRC="Hgraficos/Coche.Jpg" WIDTH="50"

HEIGHT="50"> Al mig.<P>

En la parte inferior. <IMG ALING=BOTTOM SRC="Hgraficos/Coche.Jpg"

WIDTH="50" HEIGHT"50">

</BODY>

</HTML>


pág. 18

Poner un Gráfico como Fondo de un Documento.

Se puede utilizar una imagen como fondo de un documento. La imagen se repetirá en forma de mosaico hasta llenar toda la pantalla. Sería conveniente que si se utilizan imágenes de fondo, no se utilizaran archivos demasiado voluminosos, puesto que podría repercutir en el tiempo de carga del documento.

Para colocar una imagen de fondo insertar el argumento BAKGROUND dentro de la etiqueta BODY. <BODY BACKGROUND=”nombre_archivo_imagen” Ejemplo: <HTML>

<HEAD><TITLE>Apuntes HTML</TITLE></HEAD>

<BODY BACKGROUND="Hgraficos/fondos/fondo.Gif" TEXT="000000">

<H2><CENTER>FONDOS Y VÍNCULOS GRÁFICOS</CENTER></H2>

<FONT SIZE="4">

Al seleccionar un fondo se debe tener en cuenta que el archivo tenga la extensión.GIF o .JPG.<BR>

Cuidado con el fondo seleccionado, los hay muy oscuros o con muchos dibujos, y impiden la lectura del texto con claridad.

</FONT><BR>

<FONT COLOR="FF0000">Pondremos un enlace gráfico hacia la Página8, sólo hará falta hacer un clic encima para pasar a este archivo.</FONT>

<A HREF="Página8.htm">

<IMG SRC="Hgraficos/Señor.Jpg" WIDTH="80" HEIGHT="75" ALIGN=RIGHT HSPACE=20 ALT="[Página de Gráficos]"></A>

</BODY>

</HTML>


pág. 19

Utilización de los enlaces para apuntar recursos El uso más habitual de los enlaces en un documento HTML es apuntar a recursos accesibles vía web; la mayor parte de tales recursos apuntados serán otros documentos HTML pero también pueden ser imágenes, vídeos, u otros recursos Internet aún más “exóticos”. Este tipo de enlaces se basan en el uso de la etiqueta <A> (anchor) y su correspondiente etiqueta de cierre; dicha etiqueta tiene un atributo denominado HREF que toma como valor el URL del recurso que se desea apuntar. En el siguiente punto se tratarán los distintos recursos accesibles desde un documento HTML. Distintos tipos de recursos accesibles A continuación se muestran una serie de ejemplos de enlaces HTML apuntando a distintos recursos.

Como se puede ver, existen dos esquemas de acceso que permiten acceder a varios tipos de ficheros: mediante los protocolos HTTP y FTP se puede acceder a documentos HTML, imágenes, ficheros comprimidos (.ZIP, .TAR.GZ), documentos de texto en PostScript (.PS), etc. A efectos del usuario, las principales diferencias entre acceder a un recurso mediante HTTP o FTP son las siguientes: Al acceder mediante HTTP generalmente se visualizan los recursos accedidos siempre y

cuando sean de un tipo conocido; en caso contrario se informa al usuario sobre la posibilidad de guardar el archivo en disco o abrirlo con otro programa.

Al acceder mediante FTP el recurso no se visualiza sino que se guarda en disco; es importante hacer notar que para un acceso FTP no importa la naturaleza del archivo puesto que simplemente se transfiere5.

Los otros dos esquemas de acceso, news y mailto, sirven para acceder a servicios Internet bastante más antiguos que el web pero tremendamente útiles. El primero permite acceder a un grupo de noticias (más bien un tablón de anuncios) dedicado a un tema específico para hacer o responder preguntas de otros usuarios interesados en el mismo tema. El segundo permite enviar correo electrónico a un usuario en Internet. De todos los esquemas de acceso a recursos Internet el más utilizado es el http por lo que se explicará con mayor detalle su uso, especialmente para acceder a documentos HTML. <A HREF=”http://www.tla.net/documentos/doc.htm> <IMG SRC=”im.Gif”> </A>

Cambios en la estructura del documento HTML El empleo de frames implica que en cada vista que se divida la ventana del navegador aparecerá un documento HTML distinto; dichos documentos serán exactamente iguales a los vistos hasta ahora, la única diferencia que se produce entre preparar una página web corriente y otra con frames estriba en la necesidad de describir un documento HTML extra que describa la disposición de los frames en la ventana. Un documento de frames tiene una estructura muy similar a la de un documento HTML salvo que carece de cuerpo, no se utiliza la etiqueta <BODY>, y tiene una zona donde se describen las divisiones (los frames), utilizando la etiqueta <FRAMESET>:


pág. 20

<HTML> <HEAD> <TITLE>...</TITLE> </HEAD> <FRAMESET> ... </FRAMESET> </HTML> La etiqueta <FRAMESET> tiene los atributos ROWS y COLS para determinar si la división se hará de forma horizontal o vertical. Ambos atributos toman como valor una lista de elementos separados por comas; cada elemento indicará una altura o anchura de una de las siguientes formas: entero: Se toma como un número de pixels. 1..100%: Un porcentaje de las dimensiones de la ventana que acoge el documento de frames. [entero]*: El uso de asteriscos permite crear frames de tamaño relativo; esto es, si se describen

varios frames indicando sus dimensiones y uno de tamaño relativo éste ocupará el espacio restante, si se definen dos frames relativos se reparten a partes iguales dicho espacio, pero si se definieran de la forma *,2* entonces el primero ocuparía 1/3 del espacio libre y el otro los 2/3 del espacio restante.

Dentro de la sección enmarcada por <FRAMESET>...</FRAMESET> se colocarán etiquetas <FRAME> para describir cada división mediante los siguientes atributos (tantas como filas o columnas se hayan descrito implícitamente mediante los atributos ROWS o COLS): SRC: toma como valor el URI del documento a visualizar en este frame en particular. NAME: se utiliza para nombrar el frame y poder apuntarlo desde enlaces en otros documentos

(típicamente en otros frames del mismo documento). MARGINWIDTH: el autor puede indicar un tamaño en pixels para el ancho del margen que tiene

un frame. MARGINHEIGHT: análogo a MARGINWIDTH. SCROLLING: admite tres valores, YES, NO y AUTO para indicar si se obliga a que el frame tenga

barra de scroll, se impide que la tenga o si se deja a elección del navegador. NORESIZE: un atributo sin valor que indica que no se puede cambiar el tamaño del frame.


pág. 21


pág. 22

Indicaciones de color para el cuerpo del documento El lector ya puede en estos momentos crear documentos HTML de gran calidad pero desde el punto de vista del color bastante limitados; para suplir estas carencias cromáticas el lenguaje proporciona una serie de atributos para la etiqueta <BODY> que permiten indicar el color del fondo de la página, del texto y de los enlaces: BGCOLOR: color de fondo de la página. TEXT: color del texto. LINK: color de los enlaces no visitados. VLINK: color de los enlaces visitados. ALINK: color de los enlaces cuando son activados. En todos estos casos el color puede indicarse de dos formas, mediante su nombre (en inglés) o mediante los componentes RGB del mismo en notación hexadecimal; para facilitar la tarea al futuro desarrollador web se proporciona una tabla con los colores HTML y se recomienda el uso de algún programa para determinar el código hexadecimal de aquellos colores no predefinidos8.

A continuación se muestra un pequeño ejemplo en el que pueden apreciarse los efectos de los atributos BGCOLOR, TEXT, LINK y VLINK Ejemplo 7-1 (Uso de BGCOLOR, TEXT, LINK y VLINK) <HTML> <HEAD> <TITLE>Ejemplo de color</TITLE> </HEAD> <BODY BGCOLOR=BLACK TEXT=WHITE LINK=YELLOW ALINK=FUCHSIA VLINK=LIME> <P>Esto es texto normal y, por tanto, aparece en color blanco.</P> <P><A HREF="http://giworks.uniovi.es">Esto es un enlace y, por tanto, aparece en color amarillo (a no ser que lo hayas visitado, entonces es color lima).</A></P> </BODY> </HTML> Control del texto En estos momentos el lector ya tiene un mayor control sobre las características del documento HTML que genera pero aún puede controlar más aspectos de la visualización del texto de su documento haciéndolo más profesional. Para ello se utilizará una nueva etiqueta, <FONT>, y un atributo de una etiqueta ya conocida <P> Fuente y color La etiqueta <FONT> permite mediante sus atributos SIZE, FACE y COLOR controlar el tamaño, la fuente y el color de un fragmento de texto. SIZE: el tamaño del texto puede indicarse de dos formas, absoluta o relativa. En el primer caso

se indica un valor entero comprendido entre 1 y 7 que se corresponde a un tamaño fijo que dependerá del navegador. En el segundo caso se indica un incremento o un decremento en el tamaño del texto (por ejemplo, +2 o –1) que dará lugar a un valor también en el rango 1..7.


pág. 23

FACE: este atributo permite indicar una fuente para el texto, debiendo elegir el navegador la más próxima (en cuanto a apariencia se refiere) a la seleccionada por el autor del documento9.

COLOR: el color del texto delimitado puede indicarse de forma análoga. A continuación se muestra un ejemplo del uso de la etiqueta <FONT>:


pág. 24

Uso del color en tablas De la misma forma que se puede indicar el color de fondo de un documento HTML se puede indicar un color de fondo para una tabla, una fila de una tabla o una sola celda; empleando el atributo BGCOLOR de las etiquetas <TABLE>, <TR> y <TD>. A continuación se muestra un ejemplo:

Utilización de imágenes como enlaces e imágenes mapa Una imagen en un documento HTML puede utilizarse como enlace simplemente delimitándola con las etiquetas <A>...</A>. Al emplear de este modo una imagen ésta aparece enmarcada para indicar que puede ser activada. En la práctica general se emplea el atributo BORDER con un valor 0 para eliminar dicho marco; hubo una época en que esto no se consideraba correcto pero en la actualidad ninguna página medianamente cuidada deja que aparezca el borde alrededor de las imágenes activables. En ocasiones el autor de un documento HTML no quiere utilizar toda la imagen como un único enlace sino que distintas regiones de dicha imagen deberían apuntar a recursos diferentes; esto es posible mediante el uso de imágenes mapa. Existen dos posibilidades a la hora de crear una imagen mapa en función de “quién” gestiona dicho mapa. Se habla de mapas en el servidor cuando es el servidor web el que determina qué zona del mapa ha sido activada y qué enlace HTML tiene asociado; por otro lado, se tienen los mapas en el cliente que son interpretados por el navegador. El atributo USEMAP permite indicar el URI donde se encuentra el mapa de la forma siguiente: <IMG SRC=”nombre_imagen” USEMAP=”[documento_html]#nombre_mapa”> El mapa propiamente dicho se define en HTML mediante las etiquetas <MAP> y <AREA>. La primera solo tiene un atributo, NAME, que sirve para indicar el nombre del mapa y poder referirse a él mediante el atributo USEMAP de <IMG>. La etiqueta <AREA> se emplea para describir las zonas activables del mapa y debe ir enmarcada por <MAP>...</MAP>, tiene los siguientes atributos: SHAPE: la forma de la zona activable, puede tomar los valores RECT (rectángulo), CIRCLE

(círculo) y POLY (polígono).


pág. 25

COORDS: lista de coordenadas separadas por comas que describen la zona activable. Dependen de la forma de la misma, si se trata de un rectángulo se da como “lado izquierdo, ladosuperior, lado derecho, lado inferior”, si es un círculo “centro-x, centro-y, radio” y si es un polígono “x1, y1, x2, y2, ..., xN, yN”.

HREF: el URI al que apunta la zona activable definida. NOHREF: atributo sin valor que indica que la zona no tiene asociado ningún enlace.

A continuación se muestra un sencillo ejemplo de imagen mapa correspondiente a la imagen de la figura 8-3:

Uso de imágenes como fondos de página y de tabla Para finalizar el capítulo dedicado a imágenes se explicará la forma de emplear imágenes como fondos de página y de tabla; para ello se introduce un nuevo atributo, BACKGROUND, que toma como valor el URI de la imagen a emplear y que se emplea de forma análoga a como se utilizaba BGCOLOR. A continuación se muestra un ejemplo que muestra el uso de dicho atributo (ver figura 8-4).


pág. 26

OTRAS ETIQUETAS < meta >

La etiqueta <meta> se utiliza para añadir información sobre la página. Esta información puede ser utilizada por los buscadores.

Los buscadores consultan la información de la etiqueta <meta> de las páginas, buscando coincidencias con lo que el usuario pretende encontrar.

A través de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de información, y el atributo content indica el valor de dicha información.

Para indicar el tipo de información podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave", "Descripción", etc. Pero debido a que la mayoría de buscadores están en inglés, es preferible que el tipo de información se especifique en inglés.

Los tipos de información más utilizados son los siguientes:

Tipo Significado author Autor de la página

classification Palabras para clasificar la página en los buscadores description Descripción del contenido de la página generator Programa utilizado para crear la página keywords Palabras clave

La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento.

La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>.


pág. 27

Por ejemplo, el siguiente código indica que el autor de la página es Fredy, que la página trata sobre un curso de Diseño Web, y especifica algunas palabras clave a ser consultadas por los buscadores:

<html> <head> ... <meta name="author" content="aulaclic"> <meta name="description" content="Curso de Diseño Web"> <meta name="keywords" content="código HTML etiqueta página web curso"> </head> ...

La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name.

Por ejemplo, imaginemos que por algún motivo queremos que nuestra página se actualice automáticamente cada 30 segundos. En ese caso, deberíamos utilizar la acción Refresh (actualizar). Podríamos utilizar el siguiente código:

<html> <head> ... <meta http-equiv="Refresh" content="30"> </head> ...

Ahora imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web, y queremos que cuando algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo redirija automáticamente a la dirección nueva. En ese caso podríamos insertar el siguiente código en la página que se encuentra en la dirección antigua:

<html> <head> ... <meta http-equiv="Refresh" content="5; URL=http://www.fredylcn.jimdo.com/index.htm"> </head> ...

De este modo, el navegador realizaría la función de actualizar la página, pero cargando la que se encontrara en la nueva dirección (URL=http://www.fredylcn.jimdo.com/index.htm).

guÍa de aprendizaje 01 1) datos informativos ......este nuevo estándar incluía las mejoras...

Documents