TABLAS

Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.

Las tablas están formadas por celdas, que son los recuadros que se obtienen como resultado de la intersección entre una fila y una columna

FILA <TR>

Es necesario insertar las etiquetas <tr> y </tr> por cada una de las filas de la tabla. Estas etiquetas deberán insertarse entre las etiquetas <table> y </table>

COLUMNA O CELDA <TD>

Para crear una tabla no basta con especificar el número de filas, es necesario también especificar el número de columnas.

Una celda es el resultado de la intersección entre una fila y una columna, por lo que podremos especificar el número de celdas por fila, que equivale a especificar el número de columnas por fila.

Es necesario insertar las etiquetas <td> y </td> por cada una de las celdas que compongan cada una de las filas de la tabla. Por lo tanto, habrá que insertar esas etiquetas entre las etiquetas <tr> y </tr>.

FORMATO DE UNA TABLA

FORMATO DE CELDAS

ENCABEZADO DE COLUMNA <TH>

Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas<th> y </th>.

Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas

COMBINAR CELDAS

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspanse especifica el número de filas por las que se extenderá la celda.

<table width="575" border="2" cellspacing="2">
  <tr align="center" valign="middle">
    <th colspan="4">DIFERENCIAS ENTRE EL PERRO Y EL HOMBRE</th>
  </tr>

<tr align="center" valign="middle">
    <th rowspan="2">DIFERENCIAS</th>
    <th colspan="2">PERRO</th>
    <th rowspan="2">HOMBRE</th>
  </tr>

.

SESIÓN IMÁGENES

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre. El nombre de la imagen ha de especificarse a través del atributo src

<img src="imagenes/logo_animales.gif">

Texto alternativo

Cuando una imagen no puede ser visualizada en el navegador, cosa que puede ocurrir al especificar mal el valor del atributo src, aparece un recuadro blanco con una X roja en su lugar, junto con el nombre de la imagen. Podemos hacer que en lugar de mostrarse el nombre de la imagen aparezca el texto que nosotros deseemos, gracias al atributo alt.

<img src="gatito.gif" alt="Imagen gato" >

Borde de una imagen

En general, al visualizar una página en un navegador las imágenes aparecen sin ningún borde alrededor, pero es posible establecer uno a través del atributo border. El atributo border puede tomar valores numéricos, que indican el grosor en píxeles del borde.

<img src="imagenes/logo_animales.gif" border="4" >

Tamaño de una imagen

Cuando insertamos una imagen, esta se muestra en los navegadores con su tamaño original, pero por diversos motivos puede interesarnos modificar dicho tamaño A través de los atributos width (anchura) y height (altura) puede modificarse el tamaño de la imagen. Dicho cambio de tamaño no se aplica directamente sobre el archivo de imagen, sino que lo que varía es la visualización de la imagen en el navegador.

<img src="imagenes/logo_animales.gif" width="200" height="80">

Alineación de una imagen

La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.

Los valores del atributo align pueden ser los siguientes

PerrosGatos<img scr="imagenes/logo_animales.gif" align="middle">Una web de animales

Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos fundir con la línea de texto sin que por ello cree una separación demasiado grande entre la línea donde se encuentra la imágen y las líneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botón, etc...

.

SESIÓN HIPERENLACES

Hiperenlace <a>

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y</a>. A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace

<a href="http://www.google.com">Visita www.google.com</a>

Tipos de referencias

Referencia absoluta

Conduce a una ubicación externa al sitio en el que se encuentra el documento. La ubicación es en Internet, en este caso hay que empezar la referencia por http:// , el nombre del dominio y algunas veces el nombre de la página. Si no se escribe el nombre de la página se cargará la página de inicio asociada al dominio.

<a href="http://www.google.com">Visita www.google.com</a>

Referencia relativa al sitio

Conduce a un documento situado dentro del mismo sitio que el documento actual. Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común, estando todos ellos dentro de una misma carpeta, conocida como carpeta raíz del sitio.

<a href="/t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Referencia relativa al documento

Conduce a un documento situado dentro del mismo sitio que el documento actual, pero partiendo del directorio en el que se encuentra el actual

<a href="t_4_1.htm">Enlace a Tema 4: Hiperenlaces</a>

Destino del enlace

El destino del enlace determina en qué ventana va a ser abierta la página vinculada, se especifica a través del atributo target al que se le puede asignar los siguientes valores:

_blank... Abre el documento vinculado en una ventana nueva del navegador
_parent... Abre el documento vinculado en la ventana del marco que contiene el vínculo o en el conjunto de marcos padre
_self....  Es la opción predeterminada. Abre el documento vinculado en el mismo marco o ventana que el vínculo
 _top....  Abre el documento vinculado en la ventana completa del navegador

<a href="http://www.google.com" target ="_blank">Visita www.google.com en una ventana nueva</a>

Formato de los enlaces

Cuando el vínculo está definido sobre una imágen, en el borde aparecen una serie de puntitos al pulsar sobre ella. Cuando el vínculo está definido sobre una zona de una imagen (un mapa), aparece el contorno de esa zona.

Tanto si el vínculo se asigna a un texto como a una imagen, el cursor cambia de forma al situarse encima del vínculo. Suele adquirir la apariencia de una mano señalando.

link permite determinar el color de los enlaces sin visitar (enlace que no ha sido pulsado ninguna vez).

alink permite determinar el color del enlace activo (enlace que acaba de ser pulsado).

vlink permite determinar el color de los enlaces visitados (enlaces que ya han sido pulsados).

<body link="#FF0000" vlink="#FF0099" alink="#FF9900">

<a href="http://www.google.com" target ="_blank">www.google.com</a>




.

SESIÓN FORMATO DE TEXTO

Caracteres especiales y espacios en blanco. A continuación se muestra una lista con algunos caracteres y el nombre con el que han de ser representados:

Comentarios

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.

<!-- A continuación aparecerá una línea de texto//-->
&iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina!

Saltos de línea <br>

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.

TEXTO PREFORMATEADO <PRE>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.

Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta<br>.

<pre>Hola,     BIENVENIDOS
esta     ES MI PÁGINA WEB
     y esto un texto preformateado</pre>

SEPARADORES <HR>

El elemento que suele utilizarse para separar secciones dentro de una misma página es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre.

FORMATEAR EL TEXTO <FONT>

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidosic</font>

ENCABEZADOS

Existen una serie de encabezados que suelen utilizarse para establecer títulos dentro de una página. La diferencia entre los distintos tipos de encabezado es el tamaño de la letra, el tipo de resaltado, y la separación existente entre el texto y los elementos que tiene encima y debajo de él. Hay que tener en cuanta que el navegador del usuario es el que aplicará el estilo del encabezado por lo que el mismo título se puede visualizar de forma diferente según el navegador.

A continuación se muestran los distintos encabezados existentes:

Marquesinas

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea.

Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.
A través del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).

A través del atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).

<marquee bgcolor="#006699" behavior="alternate" direction="right">
  <b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b> 
</marquee>

Las listas

Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>.

<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>

LISTA DESORDENADA <UL>

Para que una lista sea desordenada, sus elementos deberán encontrarse entre las etiquetas <ul> y </ul>

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

<ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li></ul>

LISTA ORDENADA <OL>

Para que una lista sea ordenada, sus elementos deberán encontrarse entre las etiquetas <ol> y </ol>.

A través del atributo type es posible elegir el tipo de numeración, que puede ser 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas).

<ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li></ol>

.

Estructura de una página

Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas <html> y </html>

Entre las etiquetas <html> y </html> estará comprendido el resto del código HTML de la página.

Por ejemplo:
<html>
...
</html>

--------------------------------------------------------------------------------------------------------------------

La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título.

Está formada por las etiquetas <head> y </head>. La etiqueta <head> va justo debajo de la etiqueta <html>.

Por ejemplo:
<html>
<head>
</head>
</html>

El título de la página es el que aparecerá en la parte superior de la ventana del navegador, cuando la página esté cargada en él.

Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas <title> y </title>.

Las etiquetas deben de estar dentro de las cabeceras <HEAD> </<HEAD>

<head>
<title>
Curso de HTML
</title>
</head>

</html>

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

<html>

<head>

<meta name="author" content="aulaclic">

<meta name="description" content="Curso de HTML gratuito">

<meta name="keywords" content="código HTML etiqueta página web gratis curso">

</head>

El cuerpo del documento contiene la información propia del documento, es decir lo que pqueremos que se visualice, el texto de la página, las imágenes, los formularios, etc.

Todos estos elementos tienen que encontrarse entre las etiquetas <body> y </body>, que van justo debajo de la cabecera.

Por ejemplo:

<html>

<head>
<title>
Curso de HTML
</title>
</head>
<body>
...</body>

</html>

A través de la etiqueta <body> es posible establecer el color o la imagen de fondo de la página.

El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.

<body bgcolor="#0000FF">


<body bgcolor="blue">

<body background="fondo.gif">

<body text="#FF0000">

Los colores en HTML se representan mediante un número hexadecimal.

Un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, que van del 0 al 9, y de la A a la F.
Cada color estará representado por un grupo de seis dígitos en hexadecimal, precedidos por una almohadilla, como por ejemplo#FFFFFF.

Editores de código de html

Un editor es un programa que nos permiten redactar documentos. Hoy en día existen un gran número de editores que permiten crear páginas web sin la necesidad de escribir ni una sola línea de código HTML. Estos editores disponen de un entorno visual, y generan automáticamente el código de las páginas. Al poder ver en todo momento cómo quedará la página en el navegador, se facilita la creación de las páginas, y el uso de menús permite ganar rapidez. 

Estos editores visuales pueden generar en ocasiones código basura, es decir, código que no sirve para nada, en otras ocasiones puede ser más efectivo corregir directamente el código por lo que resulta necesario saber HTML para poder depurar el código de nuestra páginas. 

Algunos de los editores visuales con los que podrás crear tus páginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, de los cuales algunos tienen la ventaja de ser gratuitos. 

Para crear páginas web escribiendo directamente el código HTML puedes utilizar la herramienta Wordpad o el Bloc de notas que proporciona Windows.

No te gusta leer... pues aqui un videito.....!!!

Disfrutalo...!!!


.

Los navegadores compatibilidad

Como hemos dicho, el navegador instalado en el ordenador del usuario es el que interpreta el código HTML de la página que visita por lo que a veces puede ocurrir que dos usuarios visualicen la misma página de forma distinta porque tienen instalados navegadores distintos o incluso versiones distintas del mismo navegador. 

Dos de los navegadores que continuamente están realizando extensiones son Internet Explorer y Netscape Navigator, que realizan extensiones incluso antes de que se establezcan los estándares, intentando incluir las nuevas funciones incluidas en los borradores. 

Los navegadores tienen que ser compatibles con la última versión HTML para poder interpretar el mayor número posible de etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el efecto que pretendía la etiqueta no queda reflejado en la página. 

Uno de los retos de los diseñadores de páginas web es hacer las páginas más atractivas utilizando toda la potencia del lenguaje HTML pero teniendo en cuentas estos problemas de compatibilidades para que el mayor número de internautas vean sus páginas tal como las ha diseñado. 

No te gusta leer... pues aqui un videito.....!!!

Disfrutalo...!!!


.