html básico - ii

HTML bsico - II

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

HTML bsico - IIAlgunos componentes

fundamentales

En el primer captulo hemos aprendido a realizar sencillas pginas web. En estesegundo captulo presentaremos dos elementos habituales de estos documentos, deuna importancia fundamental: los grficos y las tablas.

1. Las imgenes de un documento HTML

2. Las tablas de un documento HTML

1. Las imgenes de un documento HTMLLas imgenes estn presentes en los documentos HTML de muchas maneras:fotografas, dibujos, iconos, fondos, etc. Ninguno de estos elementos esimprescindible para una pgina web, pero todos son recomendables.

Antes de tratar sobre las cuestiones tcnicas, conviene reflexionar acerca de lapropia utilizacin de los grficos en los documentos HTML.

1.1. Imgenes: consideraciones previasEn muchas ocasiones, las imgenes no son otra cosa que el "maquillaje" del documento. Convieneque nuestras pginas sean bonitas, pero sin olvidar lo verdaderamente importante, el contenido, quehabitualmente no son las imgenes.

Aunque parezca estar en contradiccin con lo anterior, a veces resulta ms importante tener recursosen la edicin de imgenes que en la propia edicin HTML. Dicho de otra manera: para conseguir unabuena pgina web, resulta casi imprescindible manejar algn programa de edicin de imgenes (PaintShop Pro, Photoshop, etc.).

Para evitar que las imgenes parezcan meros "pegotes para hacer bonito", conviene integrarlas almximo, conseguir que posean alguna funcin dentro del documento. La solucin ms obvia (ademsde no colocar imgenes sin relacin directa con el tema tratado) es que resulten "pinchables", esdecir, que remitan a sus propios enlaces (ndices, anclas, contenidos secundarios, etc.).

Conviene recordar que resulta muy sencillo hacerse con una pequea biblioteca de imgenes amedida que navegamos por la red, puesto que la mayor parte de las veces pueden descargarse yalmacenarse. (Basta con pinchar la imagen deseada con el botn derecho del ratn y seleccin laopcin Salvar imagen como.) Por otra parte, la propia red dispone de miles de imgenes, al alcancede cualquier buscador (Google Images, por ejemplo)

Un problema fundamental a la hora de introducir imgenes en un documento HTML es su "peso", esdecir, su tamao en bites. Cuantas ms imgenes haya en un documento web, mayores y de mayorcalidad, ms ocuparn, y, por tanto, ms tiempo tardar el usuario en descargarlas de la red.

HTML bsico - II


Conviene tener en cuenta lo siguiente:

1. Los formatos de imgenes habituales en la Web son *.GIF y *.JPEG. Utilizar otros formatosocupa habitualmente mucho ms espacio y, adems, resulta problemtico.

2. Cul de los dos formatos resulta ms adecuado? El GIF permite, por su caractersticoentrelazado, recargar progresivamente una imagen al abrir la pgina. Por su parte, el JPEGposee algo ms de calidad en el tratamiento de los tonos (el GIF slo maneja 256 colores),pero "pesa" ms y tarda ms en descargarse. En definitiva, para imgenes sin excesivaspretensiones de calidad (iconos, fondos, etc.) los dos formatos vienen a resultar equivalentes.

3. Si, a pesar de todo, una imagen ocupa mucho espacio, una buena idea puede ser colocar enla pgina principal una pequea imagen de baja calidad, a modo de icono, enlazada con laimagen completa.

1.2. Imgenes: las etiquetasLa etiqueta bsica para insertar una imagen es: . De estamanera, el navegador visualizar la imagen contenida en la direccin especificada.1

Como puede verse, la imagen no forma parte de un documento HTML: ste slo indica al navegadordnde puede descargarla.

Esta etiqueta bsica posee varios atributos, que se muestran en la siguiente tabla:

Atributos Funcin Texto alternativo (el que aparece cuando se posa el ratn sobre la imagen)

Especificacin de la altura y la anchura en pxeles

Distintas posibilidades de alineacin con respecto al texto

Borde de la imagen

Conviene hacer algunas aclaraciones con respecto a estos atributos:

1. El "texto alternativo" se denomina as porque supone una verdadera alternativa al grfico.Hay que tener en cuenta la posibilidad de que el navegador que visite nuestra pgina tengadesactivada la opcin de "ver imgenes" (o incluso un error en el enlace por nuestra parte!),

en cuyo caso slo aparecera dicho texto.2 En condiciones "normales", el texto alternativoposee la funcin de un pie de foto, puesto que aparece al posar el cursor sobre la imagen.

2. El tamao de la imagen puede modificarse, efectivamente, con , pero hay que tener en cuenta que los valores que sealemos aqu noalteren las proporciones de la imagen original. En cualquier caso, como norma general, esmejor efectuar todos los ajustes necesarios en un programa de edicin grfica (Paint ShopPro, Photoshop, etc.) .

3. Los ajustes de pueden referise a la lnea de texto o al prrafo:

Una imagen pequea (como un icono) puede presentarse dentro de una lnea detexto. En este caso, puede alinearse justo sobre la lnea del texto (), debajo () o en el medio ().3

Una imagen puede colocarse dentro de un prrafo, de modo que el texto sepresente a la izquierda () o a la derecha (

HTML bsico - II


align="left">) de la imagen.4

Una imagen puede presentarse formando su propio prrafo. En ese caso, una buenamanera de alinearla es colocar la imagen dentro de una etiqueta ....

4. Para que la imagen no presente bordes, el valor del atributo ha de ser .

Una imagen puede soportar su propio enlace.5 Para ello, basta con enlazar la etiqueta de la imagende la manera ya conocida. Por ejemplo:

.

EJERCICIO 1Vamos a practicar un poco con imgenes:1. Para empezar, necesitamos algunas

imgenes. Vamos a utilizar dos: el icono de"inicio" (el pequeo tringulo azul al final decada apartado) de esta misma pgina, y elde la UDWeb (en mi home). Guarda ambosen tu disco.

2. Crea un documento HTML y coloca elanagrama de UD antes del ttulo (que puedeser, por ejemplo, "Ejercicio 1").

3. Ahora modifica el tamao de la imagen, paraque sea ms pequea que el original. Paraeso necesitas conocer el tamao original,verdad? Pues avergualo en el cdigo de lapgina original.

4. Ahora quiero que la conviertas exactamenteal triple de su tamao. Observa que alaumentar el tamao se pierde calidad.

5. Coloca el icono de "inicio" junto al texto"volver arriba". Copia el conjunto tres vecesy colcalo con distintas alineaciones.

6. Enlaza el anagrama de la UD a la pginaprincipal de la UDWeb (ya sabes:http:///www.deusto.es). Observars que seha aadido un marco a la imagen. Cmopuedes quitarlo?

7. Por ltimo, coloca el texto alternativo "Webde la UD" en la imagen anterior.

1.3. Los fondos de pantallaPara mejorar su presentacin general, un documento HTML puede llevar un fondo coloreado o unaimagen, del tipo que sea.

La instruccin para el fondo de pantalla se aade a la etiqueta del :

1. Si es un color de fondo, la etiqueta es, por ejemplo: .

2. Si es una imagen de fondo, la etiqueta es: .

Cuando se utiliza una imagen de fondo, suele tratarse simplemente de algn pequeo archivo con

algn tipo de textura, que se coloca a modo de mosaico, como si fuera un papel pintado.6

La utilizacin de fondos puede llegar a dificultar gravemente la lectura de los caracteres. Vemoslocon un doble ejemplo de color de fondo e imagen de fondo:

EJEMPLO 1-a EJEMPLO 1-b

HTML bsico - II


Esto tiene un color de fondo.

Ver resultado

Esto tiene una imagen de fondo.

Ver resultado

Para solucionar este problema, existen etiquetas que permiten especificar el color del texto y de losenlaces:

Etiquetas Funcin Determina el color del texto Determina el color del enlace Determina el color del enlace visitado Determina el color del enlace activo

Conviene hacer algunas aclaraciones con respecto a estas etiquetas:

1. En primer lugar, debe quedar claro que estas etiquetas no se refieren a las imgenes, sino alcolor de los caracteres del documento. Simplemente, ste es el momento adecuado parapresentarlas.

2. En principio, el color de los caracteres puede variar segn los navegadores, puesto quedepende de sus opciones por defecto. Estas etiquetas anulan dichas especificaciones pordefecto, asegurando por tanto que todos los caracteres del documento se vern de igualmanera en cualquier browser.

3. Como estas etiquetas se insertan en la etiqueta , afectan a todo el documento; son,por tanto, mucho ms potentes que la etiqueta .

Veamos ahora cmo pueden mejorarse con estas nuevas etiquetas los ejemplo anteriores:

EJEMPLO 2-a

Esto tiene un color de fondo.

Ver resultado

EJEMPLO 2-b

Esto tiene una imagen de fondo.

Ver resultado

Como puede observarse, el Ejemplo 2-b resulta prcticamente imposible de leer con esa definicin decolor. Podramos buscar alguna combinacin que destacase ms, pero el verdadero problema de esedocumento es que la imagen utilizada como fondo es inadecuada. La solucin consiste comomnimo en tratar dicha imagen en un programa adecuado, para suavizar sus tonos.

inicio

2. Las tablas de un documento HTML

HTML bsico - II


Las tablas permiten ordenar y alinear los elementos de un documento de una manera precisa.

Las tablas son mucho ms frecuentes de lo que parece a primera vista, puesto que, en la mayor partede los casos, las lneas que las definen permanecen ocultas.

Las etiquetas fundamentales que definen una tabla son las siguientes:

Etiquetas Funcin... Principio y final de tabla... Principio y final de lnea... Principio y final de celda

Con estas etiquetas ya podemos definir una tabla, por ejemplo, de 2x2 (2 lneas, 2 columnas y 4celdas):

EJEMPLO 3

Ejemplo 3

Celda 1Celda 2

Celda 3Celda 4

Ver resultado

Para la primera fila de una tabla, que en muchas ocasiones contiene el encabezado o el ttulo de lascolumnas, puede utilizarse la etiqueta ... en lugar de la habitual ...,porque el contenido de la celda aparece as centrado y en negrita.

La etiqueta ... permite introducir un pie de tabla. Puede especificarse laposicin del pie con respecto a la tabla por medio de las siguientes atributos:

Atributos Funcin Encima / debajo de la tabla Alineado izquierdo / centrado / derecho

2.1. Las propiedades de la tablaLa tabla del Ejemplo 3 es muy rudimentaria, puesto que no se ha definido ninguna de suscaractersticas generales, salvo el nmero de filas y columnas.

La etiqueta posee una serie de atributos que permiten controlar sus caractersticasbsicas. Se muestran en la siguiente tabla:

Atributos Funcin

HTML bsico - II


Anchura de la tabla (en pxeles / en porcentaje) Altura de la tabla (en pxeles / en porcentaje) Espacio (en pxeles) entre las celdas

(o sea, el espesor de las lneas del cuadriculado) Espacio (en pxeles) entre el borde y el contenido

(o sea, la envoltura de las celdas) Alineado de la tabla Grosor (en pxeles) de las lneas Color de las lneas Color de fondo Imagen de fondo

Conviene realizar varias pruebas con distintos valores de los atributos anteriores para controlaradecuadamente el aspecto de las tablas. En cualquier caso, la tabla anterior puede actualizarse, porejemplo, de la siguiente manera:

EJEMPLO 4

Ejemplo 4

Celda 1Celda 2

Celda 3Celda 4

Ver resultado

Como es lgico, una tabla puede verse afectada por un considerable nmero de las etiquetasexpuestas en los apartados anteriores.

EJERCICIO 2Para empezar, debes crear una serie de tablas:de 3x3 (o sea, 3 filas y 3 columnas), 4x4, 3x2 y2x4. Numera las celdas de manera similar a losejemplos.Ahora vamos a plantear un pequeo problemaque te obligar a manejar algunas etiquetasanteriores: simplemente, debes reproducir latabla del Ejemplo 4 y copiarla alineada a laizquierda, centrada y alineada a la derecha.Te das cuenta inmediatamente de cmo debeshacerlo? Excelente! Necesitas repasar todo lo

HTML bsico - II


anterior? Bueno, no pasa nada: es lo normal.Llevas un tiempo intentndolo y no loconsigues? No te desanimes, pero tal vezdeberas volver a trabajar estos apuntes desdeel principio. De todas maneras, si quieres, aqutienes la solucin.

2.2. Las propiedades de la celdasCada celda dentro de una tabla puede contener todo tipo de elementos: texto, imgenes, enlaces, etc.

Una celda puede incluso contener dentro de s una tabla secundaria completa. De este modo, lastablas pueden anidinarse unas dentro de otras.

El contenido de cada celda puede verse afectado por infinidad de etiquetas distintas, como cualquierotra porcin de texto: fuentes, tamaos, colores, alineados, etc.

En el subapartado anterior, hemos presentado las propiedades generales de la tabla. Vamos a verahora cmo controlar las propiedades que afectan a una fila o a una nica celda:

Atributos Funcin Anchura de la fila o celda (en pxeles / en porcentaje) Altura de la fila o celda (en pxeles / en porcentaje) Grosor (en pxeles) de las lneas Color de las lneas Color de fondo Imagen de fondo Alineado horizonal Alineado vertical

Los parmetros de esta tabla pueden aplicarse tanto a filas enteras como a una nica celda.

Un mismo parmetro (el tamao, el color de fondo, etc.) puede especificarse para toda la tabla, paracada fila o para cada celda. Es importante, por tanto, que los valores de las distintas indicaciones noresulten contradictorios.

En cualquier caso, la regla general es que la especificacin en una unidad menor se impone a laespecicacin de una unidad mayor. As por ejemplo, el valor de alineamiento de una celda se imponeal alineamiento general de toda una fila.

Todas las celdas de una fila son por defecto de igual anchura, pero se van ajustando al contenido,7

por lo que muy probablemente se desajustarn al introducir distintos caracteres en cada una de ellas.Para evitar este problema, es necesario utilizar el atributo , como se muestra en elsiguiente ejemplo:

EJEMPLO 5

Ejemplo 5

La siguiente tabla, sin indicaciones de anchura para lasceldas, nace simtrica:

1 2 3 4

1 2 3 4

HTML bsico - II


Pero se vuelve asimtrica si introducimos caracteresdesiguales en las distintas celdas:

Celda uno Segunda CeldaTres 4 1 2 3 4

Para corregirlo, debemos definir la anchura de las celdas(con la primera fila vale), en este caso todas iguales. Comolo hacemos en trminos porcentuales (25% para cadacelda), el navegador tomar como dicho valor la anchura dela celda mayor:

Celda uno Segunda Celda Tres 4 1 2 3 4

Ver resultado

Hasta este momento, slo hemos manejado tablas homogneas, es decir, con un nmero constantede filas y columnas. Sin embargo, las tablas suelen adoptar otras muchas formas.

Para conseguir una tabla asimtrica hay que ir agrupando las celdas, bien en la fila, bien en lacolumna. Las etiquetas para este proceso son las siguientes:

Etiquetas Funcin Fusin de n celdas en la misma fila Fusin de n celdas en la misma columna

El siguiente ejemplo muestra el etiquetado de un par de tablas asimtricas:

EJEMPLO 6

Tablas asimtricas/TITLE>

Primera tabla asimtrica:

HTML bsico - II


Segunda tabla simtrica:

Ver resultado

En definitiva, la creacin de tablas es poco menos que un "arte", que depende no slo del dominiotcnico, sino de la imaginacin y del sentido del creador. Por ejemplo, puedes ver aqu un ejemploalgo ms trabajado, aunque ciertamente feo. La posibilidades de las tablas son prcticamenteilimitadas.

El manejo del etiquetado de las tablas no es defcil pero s complicado, porque exije una granminuciosidad. Aunque utilicemos un editor de HTML.

inicio

Notas1 Conviene recordar en este punto todo lo sealado en el captulo anterior sobre el direccionamiento de los

enlaces.2 El texto alternativo es importante para la accesibilidad de los contenidos. Por ejemplo, un programa lector de

web para invidentes reproducir el contenido de la etiqueta.3 En realidad existen ms valores para este atributo, pero no suelen usarse, porque son equivalentes a alguno

de los ya sealados (=), = ,o bien suponen diferencias casi inapreciables ( y conrespecto a las alineaciones inferior y media).

4 Otra manera de controlar la disposicin conjunta de imgenes y texto es mediante el uso de tablas, comoveremos en el siguiente apartado.

5 Existe adems la posibilidad de crear imgenes con varias zonas definidas dentro de s mismas, que remitena sus respectivos enlaces. Como el ejemplo tpico de estas imgenes es un mapa cuyas distintas regionesremiten a distintas pginas, suelen denominarse "mapas activos" (o "mapas sensitivos"). El etiquetado dedichas imgenes supera los contenidos de este apartado. Sin embargo, los editores de HTML permitenrealizarlos con relativa facilidad.

6 Por ejemplo, el que utiliza esta misma pgina.7 Para evitar que el contenido de la celda se ajuste automticamente, puede emplearse el atributo , que hace que el contenido de una celda se presente en una sola lnea, de modo que se genera

HTML bsico - II


un scroll horizontal en caso de necesidad.

inicioAlexander Iribar >> Edicin digitalComentarios: [email protected]

paginaspersonales.deusto.esHTML bsico - II

html básico - ii

Documents