HTML Básico - Lección 3

Enlaces

Hasta ahora has hecho una página web independiente, luce todo muy bien y agradable, pero lo qué hace especial a Internet son todos los enlaces juntos.

La 'H' y la 'T' en 'HTML' son para 'hipertexto', que básicamente es un sistema de texto enlazado.

Una etiqueta de enlace (a) se usa para definir un enlace, pero también necesitas agregar algo mas a la etiqueta de enlace - el destino de este.

Agregar esto a tu documento:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//ES"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title> Mi primera pagina web </title>
</head>

<body>

	<h1> Mi primera pagina web </h1>

	<h2> ¿Que es esto? </h2>
	<p> Una simple pagina haciendo uso de HTML </p>

	<h2> ¿Para que? </h2>
	<p> Para aprender HTML </p>

	<h2> Donde encuentro la Wikiversidad </h2>
	<p> <a href="http://es.wikiversity.org/wiki/Portada"> Wikiversidad </a></p>

</body>

</html>

El destino del enlace se define en el atributo href de la etiqueta. El enlace puede ser absoluto, por ejemplo "http://www.google.com", o puede ser relativo a la página actual.

Si tienes por ejemplo un archivo llamado "mishobbies.html" entonces la línea de código quedaria así <a href="mishobbies.html"> Mis Aficiones </a> o algo parecido.

Un enlace no necesariamente lleva a otro archivo HTML, puede llevar a cualquier otro tipo de archivo en la red.

Un enlace también puede enviar al usuario a otra parte de la misma página que están viendo. Puedes agregar un atributo id sobre cualquier etiqueta, por ejemplo <h2 id= "hobbies"> Hobbies </h2> , y después la enlazas usando algo similar a esto: <a href="#hobbies"> Ir a Hobbies </a> . Seleccionando este enlace la página ira justo al elemento con esa id.

La etiqueta a permite que abras el enlace en una ventana nueva, en ves de sustituir la página web que el usuario está viendo, en un principio es buena idea pues no envía al usuario lejos de tu sitio web.

Sin embargo hay un número de razones por las que no debes hacer esto.

Desde el punto de vista de la utilidad, este método rompe la navegación. La herramienta más comúnmente usada en un navegador es el botón "Atrás". Abrir una ventana nueva inhabilita esta función.

Siendo mas especifico, un punto más general de la utilidad, los usuarios no quieren que ventanas nuevas se abran por todas partes. Si desean abrir un enlace en una ventana nueva entonces desean poder elegir hacerlo ellos mismos.

Referencia

a

Imágenes

Las cosas pueden parecer un poco insípidas y aburridas con todo ese formato de texto. Por supuesto, la red no es solo texto, es multimedia y su forma mas común es la imagen.

La etiqueta img se usa para poner una imagen en un documento HTML y luce como esto:

<img src="http://www.miweb.com/imagenes/logo.gif" width="70" height="70" alt="logo miweb" />

La etiqueta src le indica al navegador donde encontrar la imagen. Como la etiqueta a esta puede ser absoluta, pero es usualmente relativa. Por ejemplo, si tu creas tu propia imagen y la guardas como "miimagen.jpg" en una carpeta llamada imágenes entonces el código podría ser <img src="imágenes/miimagen.jpg"...

Los atributos width y height son necesarios porque si se omiten, el navegador tendria que calcular el tamaño de la imagen a cargar, en vez de cuando estas están en la página, lo cuál significa que la disposición del documento puede cambiar mientras que la página está cargando.

El atributo alt es la descripción alternativa. Esta se usa cuando la gente no puede ver la imagen. Esto es un requisito en la última versión de HTML.

Observe que, como la etiqueta br , la etiqueta img no tiene etiqueta de cierre, se cierra, terminando con " /> "

La construcción de imágenes para la web es un tema ajeno a este curso, pero vale la pena observar algunas cosas…

Los formatos de archivo más usados para las imágenes son GIFs y JPEGs. Ambos son formatos comprimidos, y tienen muy diferentes usos.

Los GIFs no puede tener más de 256 colores, pero mantienen el color de la imagen original. Cuanto más bajo es el número de colores que tiene la imagen, más bajo será el tamaño del archivo.

LOS GIFS SE DEBEN UTILIZAR PARA IMÁGENES CON COLORES SÓLIDOS.

Por otra parte los JPEGs usan un algoritmo matemático para comprimir la imagen que distorsiona un poco la imagen original. Cuanto más baja es la compresión, más grande es el tamaño del archivo, pero mas nítida la imagen.

LOS JPEGS SE DEBEN UTILIZAR PARA IMÁGENES TALES COMO FOTOGRAFÍAS.

Las imágenes son quizás los archivos más grandes que un nuevo diseñador web manejará. Es un error común olvidar el tamaño de archivo de las imágenes, que pueden ser extremadamente grandes. La página web debe descargar lo más rápidamente posible, y si tienes presente que la mayoría de la gente todavía utiliza los módem que descargan menos de 7Kb por segundo (en realidad es menos de 5Kb), puedes ver cómo un archivo grande retrasará enormemente la transferencia directa de una página completa.

Necesitas lograr un equilibrio razonable entre la calidad de la imagen y el tamaño de esta. La mayoría de los programas modernos de edición de imagen permiten que comprimas imágenes y la mejor manera de calcular cuál es la imagen más adecuada para usar es el ensayo y error.

Tablas

A través de la red mundial, las tablas HTML son usadas y abusadas para la disposición de las páginas . El uso correcto para las tablas es hacer exactamente lo qué esperarías que una tabla hiciera - estructurar datos tabulados.

Hay un número de etiquetas usadas en tablas, y conseguir que se aprenda completamente cómo trabajan es probablemente el área más difícil de este curso de HTML.

Copia el siguiente código en el cuerpo de tu documento y veamos que es lo que hace cada etiqueta:

<table>
	<tr>
		<td>Fila 1, columna 1</td>
		<td>Fila 1, columna 2</td>
		<td>Fila 1, columna 3</td>
	</tr>
	<tr>
		<td>Fila 2, columna 1</td>
		<td>Fila 2, columna 2</td>
		<td>Fila 2, columna 3</td>
	</tr>
	<tr>
		<td>Fila 3, columna 1</td>
		<td>Fila 3, columna 2</td>
		<td>Fila 3, columna 3</td>
	</tr>
	<tr>
		<td>Fila 4, columna 1</td>
		<td>Fila 4, columna 2</td>
		<td>Fila 4, columna 3</td>
	</tr>
</table>

El elemento table define la tabla.

El elemento tr define una fila de la tabla.

El elemento td define una columna de datos. Éstos deben estar entre las etiquetas tr , como se muestra arriba.

Si imaginas una tabla 3x4, que es de 12 celdas, debe tener cuatro elementos tr para definir las filas y tres elementos td dentro de cada uno de las filas, haciendo un total de 12 elementos (celdas) td .

Referencia

table: Encierran una tabla.
tr: Encierran el contenido de una fila en una tabla (table-row).
td: Encierran el contenido de una celda en una tabla (table-data).

Proyecto: Diseño Web

Anterior: HTML Básico - Lección 2 — HTML Básico - Lección 3 — Siguiente: HTML Básico - Lección 4